/* ==========================================================================
   CINECOWBOY DESIGN SYSTEM
   Western-themed cinema & streaming platform
   Version: 1.0.0
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     1a. Color Palette
     ------------------------------------------------------------------ */

  /* Brand Red */
  --cc-primary:        #B80000;
  --cc-primary-dark:   #8B0000;
  --cc-primary-light:  #D43232;

  /* Warm Leather */
  --cc-secondary:      #C8956C;
  --cc-secondary-dark: #A07050;

  /* Accent Metals */
  --cc-accent-gold:    #D4A843;
  --cc-accent-copper:  #B87333;

  /* Backgrounds */
  --cc-bg-dark:        #0D0D0D;
  --cc-bg-darker:      #000000;
  --cc-bg-card:        #1A1A1A;
  --cc-bg-elevated:    #242424;
  --cc-bg-wood:        #2C1810;

  /* Text */
  --cc-text-primary:   #FFFFFF;
  --cc-text-secondary: #B0B0B0;
  --cc-text-muted:     #7A7A7A;
  --cc-text-dark:      #1A1A1A;

  /* Semantic */
  --cc-success:        #2E7D32;
  --cc-warning:        #F9A825;
  --cc-error:          #C62828;
  --cc-info:           #1565C0;

  /* Overlay */
  --cc-overlay:        rgba(0, 0, 0, 0.6);
  --cc-overlay-heavy:  rgba(0, 0, 0, 0.85);


  /* ------------------------------------------------------------------
     1b. Typography
     ------------------------------------------------------------------ */

  --cc-font-display:  'Rye', cursive;
  --cc-font-heading:  'Oswald', sans-serif;
  --cc-font-body:     'Inter', sans-serif;

  /* Modular Type Scale (base 16px, ratio ~1.25) */
  --cc-text-xs:    0.75rem;    /* 12px */
  --cc-text-sm:    0.875rem;   /* 14px */
  --cc-text-base:  1rem;       /* 16px */
  --cc-text-md:    1.125rem;   /* 18px */
  --cc-text-lg:    1.25rem;    /* 20px */
  --cc-text-xl:    1.5rem;     /* 24px */
  --cc-text-2xl:   1.875rem;   /* 30px */
  --cc-text-3xl:   2.25rem;    /* 36px */
  --cc-text-4xl:   3rem;       /* 48px */
  --cc-text-5xl:   3.75rem;    /* 60px */
  --cc-text-6xl:   4.5rem;     /* 72px */

  /* Line Heights */
  --cc-leading-none:    1;
  --cc-leading-tight:   1.15;
  --cc-leading-snug:    1.3;
  --cc-leading-normal:  1.5;
  --cc-leading-relaxed: 1.625;
  --cc-leading-loose:   2;

  /* Font Weights */
  --cc-weight-light:    300;
  --cc-weight-regular:  400;
  --cc-weight-medium:   500;
  --cc-weight-semibold: 600;
  --cc-weight-bold:     700;
  --cc-weight-black:    900;

  /* Letter Spacing */
  --cc-tracking-tighter: -0.04em;
  --cc-tracking-tight:   -0.02em;
  --cc-tracking-normal:   0;
  --cc-tracking-wide:     0.04em;
  --cc-tracking-wider:    0.08em;
  --cc-tracking-widest:   0.16em;


  /* ------------------------------------------------------------------
     1c. Spacing (8px base)
     ------------------------------------------------------------------ */

  --cc-space-0:   0;
  --cc-space-px:  1px;
  --cc-space-0-5: 0.125rem;  /*  2px */
  --cc-space-1:   0.25rem;   /*  4px */
  --cc-space-1-5: 0.375rem;  /*  6px */
  --cc-space-2:   0.5rem;    /*  8px  -- base unit */
  --cc-space-3:   0.75rem;   /* 12px */
  --cc-space-4:   1rem;      /* 16px */
  --cc-space-5:   1.25rem;   /* 20px */
  --cc-space-6:   1.5rem;    /* 24px */
  --cc-space-8:   2rem;      /* 32px */
  --cc-space-10:  2.5rem;    /* 40px */
  --cc-space-12:  3rem;      /* 48px */
  --cc-space-16:  4rem;      /* 64px */
  --cc-space-20:  5rem;      /* 80px */
  --cc-space-24:  6rem;      /* 96px */
  --cc-space-32:  8rem;      /* 128px */


  /* ------------------------------------------------------------------
     1d. Border Radius
     ------------------------------------------------------------------ */

  --cc-radius-none: 0;
  --cc-radius-sm:   0.125rem;  /*  2px */
  --cc-radius-md:   0.25rem;   /*  4px */
  --cc-radius-lg:   0.5rem;    /*  8px */
  --cc-radius-xl:   0.75rem;   /* 12px */
  --cc-radius-2xl:  1rem;      /* 16px */
  --cc-radius-full: 9999px;


  /* ------------------------------------------------------------------
     1e. Shadows
     ------------------------------------------------------------------ */

  --cc-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.3);
  --cc-shadow-md:       0 4px 6px rgba(0, 0, 0, 0.4);
  --cc-shadow-lg:       0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --cc-shadow-xl:       0 20px 25px -5px rgba(0, 0, 0, 0.6);
  --cc-shadow-2xl:      0 25px 50px -12px rgba(0, 0, 0, 0.7);
  --cc-shadow-inner:    inset 0 2px 4px rgba(0, 0, 0, 0.4);
  --cc-shadow-glow-red: 0 0 20px rgba(184, 0, 0, 0.4);
  --cc-shadow-glow-gold:0 0 20px rgba(212, 168, 67, 0.3);


  /* ------------------------------------------------------------------
     1f. Transitions
     ------------------------------------------------------------------ */

  --cc-ease-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --cc-ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --cc-ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --cc-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --cc-ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --cc-duration-fast:   150ms;
  --cc-duration-base:   250ms;
  --cc-duration-slow:   400ms;
  --cc-duration-slower: 600ms;

  --cc-transition-fast:   all 150ms var(--cc-ease-default);
  --cc-transition-base:   all 250ms var(--cc-ease-default);
  --cc-transition-slow:   all 400ms var(--cc-ease-default);
  --cc-transition-color:  color 250ms var(--cc-ease-default),
                           background-color 250ms var(--cc-ease-default),
                           border-color 250ms var(--cc-ease-default);
  --cc-transition-shadow: box-shadow 250ms var(--cc-ease-default);
  --cc-transition-transform: transform 250ms var(--cc-ease-default);


  /* ------------------------------------------------------------------
     1g. Z-index Scale
     ------------------------------------------------------------------ */

  --cc-z-behind:    -1;
  --cc-z-default:    0;
  --cc-z-raised:     1;
  --cc-z-dropdown:   100;
  --cc-z-sticky:     200;
  --cc-z-overlay:    300;
  --cc-z-modal:      400;
  --cc-z-popover:    500;
  --cc-z-toast:      600;


  /* ------------------------------------------------------------------
     1h. Breakpoints (reference only -- used in media queries below)
     ------------------------------------------------------------------ */

  /* sm:  576px  */
  /* md:  768px  */
  /* lg:  992px  */
  /* xl:  1200px */
  /* xxl: 1400px */
}


/* ==========================================================================
   2. RESET / NORMALIZE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-base);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-leading-normal);
  color: var(--cc-text-primary);
  background-color: var(--cc-bg-dark);
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-weight: var(--cc-weight-bold);
}

p {
  overflow-wrap: break-word;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--cc-bg-elevated);
}

:focus-visible {
  outline: 2px solid var(--cc-accent-gold);
  outline-offset: 2px;
}

::selection {
  background-color: var(--cc-primary);
  color: var(--cc-text-primary);
}


/* ==========================================================================
   3. GRID SYSTEM (12-column CSS Grid)
   ========================================================================== */

/* ---- Container ---- */

.cc-container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--cc-space-4);
}

.cc-container-fluid {
  width: 100%;
  padding-inline: var(--cc-space-4);
}

.cc-container-narrow {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--cc-space-4);
}

/* ---- Row ---- */

.cc-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--cc-space-6);
}

.cc-row--no-gap {
  gap: 0;
}

.cc-row--gap-sm {
  gap: var(--cc-space-3);
}

.cc-row--gap-lg {
  gap: var(--cc-space-8);
}

/* ---- Columns (default / xs) ---- */

.cc-col-1  { grid-column: span 1; }
.cc-col-2  { grid-column: span 2; }
.cc-col-3  { grid-column: span 3; }
.cc-col-4  { grid-column: span 4; }
.cc-col-5  { grid-column: span 5; }
.cc-col-6  { grid-column: span 6; }
.cc-col-7  { grid-column: span 7; }
.cc-col-8  { grid-column: span 8; }
.cc-col-9  { grid-column: span 9; }
.cc-col-10 { grid-column: span 10; }
.cc-col-11 { grid-column: span 11; }
.cc-col-12 { grid-column: span 12; }

/* Full-width default for mobile */
.cc-col { grid-column: span 12; }

/* ---- sm (>=576px) ---- */
@media (min-width: 576px) {
  .cc-col-sm-1  { grid-column: span 1; }
  .cc-col-sm-2  { grid-column: span 2; }
  .cc-col-sm-3  { grid-column: span 3; }
  .cc-col-sm-4  { grid-column: span 4; }
  .cc-col-sm-5  { grid-column: span 5; }
  .cc-col-sm-6  { grid-column: span 6; }
  .cc-col-sm-7  { grid-column: span 7; }
  .cc-col-sm-8  { grid-column: span 8; }
  .cc-col-sm-9  { grid-column: span 9; }
  .cc-col-sm-10 { grid-column: span 10; }
  .cc-col-sm-11 { grid-column: span 11; }
  .cc-col-sm-12 { grid-column: span 12; }
}

/* ---- md (>=768px) ---- */
@media (min-width: 768px) {
  .cc-container { padding-inline: var(--cc-space-6); }

  .cc-col-md-1  { grid-column: span 1; }
  .cc-col-md-2  { grid-column: span 2; }
  .cc-col-md-3  { grid-column: span 3; }
  .cc-col-md-4  { grid-column: span 4; }
  .cc-col-md-5  { grid-column: span 5; }
  .cc-col-md-6  { grid-column: span 6; }
  .cc-col-md-7  { grid-column: span 7; }
  .cc-col-md-8  { grid-column: span 8; }
  .cc-col-md-9  { grid-column: span 9; }
  .cc-col-md-10 { grid-column: span 10; }
  .cc-col-md-11 { grid-column: span 11; }
  .cc-col-md-12 { grid-column: span 12; }
}

/* ---- lg (>=992px) ---- */
@media (min-width: 992px) {
  .cc-col-lg-1  { grid-column: span 1; }
  .cc-col-lg-2  { grid-column: span 2; }
  .cc-col-lg-3  { grid-column: span 3; }
  .cc-col-lg-4  { grid-column: span 4; }
  .cc-col-lg-5  { grid-column: span 5; }
  .cc-col-lg-6  { grid-column: span 6; }
  .cc-col-lg-7  { grid-column: span 7; }
  .cc-col-lg-8  { grid-column: span 8; }
  .cc-col-lg-9  { grid-column: span 9; }
  .cc-col-lg-10 { grid-column: span 10; }
  .cc-col-lg-11 { grid-column: span 11; }
  .cc-col-lg-12 { grid-column: span 12; }
}

/* ---- xl (>=1200px) ---- */
@media (min-width: 1200px) {
  .cc-col-xl-1  { grid-column: span 1; }
  .cc-col-xl-2  { grid-column: span 2; }
  .cc-col-xl-3  { grid-column: span 3; }
  .cc-col-xl-4  { grid-column: span 4; }
  .cc-col-xl-5  { grid-column: span 5; }
  .cc-col-xl-6  { grid-column: span 6; }
  .cc-col-xl-7  { grid-column: span 7; }
  .cc-col-xl-8  { grid-column: span 8; }
  .cc-col-xl-9  { grid-column: span 9; }
  .cc-col-xl-10 { grid-column: span 10; }
  .cc-col-xl-11 { grid-column: span 11; }
  .cc-col-xl-12 { grid-column: span 12; }
}

/* ---- xxl (>=1400px) ---- */
@media (min-width: 1400px) {
  .cc-container { max-width: 1320px; }

  .cc-col-xxl-1  { grid-column: span 1; }
  .cc-col-xxl-2  { grid-column: span 2; }
  .cc-col-xxl-3  { grid-column: span 3; }
  .cc-col-xxl-4  { grid-column: span 4; }
  .cc-col-xxl-5  { grid-column: span 5; }
  .cc-col-xxl-6  { grid-column: span 6; }
  .cc-col-xxl-7  { grid-column: span 7; }
  .cc-col-xxl-8  { grid-column: span 8; }
  .cc-col-xxl-9  { grid-column: span 9; }
  .cc-col-xxl-10 { grid-column: span 10; }
  .cc-col-xxl-11 { grid-column: span 11; }
  .cc-col-xxl-12 { grid-column: span 12; }
}

/* ---- Column offset utilities ---- */

.cc-col-start-1  { grid-column-start: 1; }
.cc-col-start-2  { grid-column-start: 2; }
.cc-col-start-3  { grid-column-start: 3; }
.cc-col-start-4  { grid-column-start: 4; }
.cc-col-start-5  { grid-column-start: 5; }
.cc-col-start-6  { grid-column-start: 6; }
.cc-col-start-7  { grid-column-start: 7; }
.cc-col-start-8  { grid-column-start: 8; }
.cc-col-start-9  { grid-column-start: 9; }
.cc-col-start-10 { grid-column-start: 10; }
.cc-col-start-11 { grid-column-start: 11; }
.cc-col-start-12 { grid-column-start: 12; }


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/* ---- Display (Rye -- western display) ---- */

.cc-display {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-5xl);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-leading-none);
  letter-spacing: var(--cc-tracking-tight);
  color: var(--cc-text-primary);
}

.cc-display-sm {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-4xl);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-leading-tight);
  letter-spacing: var(--cc-tracking-tight);
}

.cc-display-lg {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-6xl);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-leading-none);
  letter-spacing: var(--cc-tracking-tighter);
}

/* ---- Headings (Oswald) ---- */

.cc-h1 {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-4xl);
  font-weight: var(--cc-weight-bold);
  line-height: var(--cc-leading-tight);
  letter-spacing: var(--cc-tracking-tight);
  text-transform: uppercase;
}

.cc-h2 {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-3xl);
  font-weight: var(--cc-weight-bold);
  line-height: var(--cc-leading-tight);
  letter-spacing: var(--cc-tracking-tight);
  text-transform: uppercase;
}

.cc-h3 {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-2xl);
  font-weight: var(--cc-weight-semibold);
  line-height: var(--cc-leading-snug);
  text-transform: uppercase;
}

.cc-h4 {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-xl);
  font-weight: var(--cc-weight-semibold);
  line-height: var(--cc-leading-snug);
  text-transform: uppercase;
}

.cc-h5 {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-lg);
  font-weight: var(--cc-weight-medium);
  line-height: var(--cc-leading-snug);
  text-transform: uppercase;
}

.cc-h6 {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-md);
  font-weight: var(--cc-weight-medium);
  line-height: var(--cc-leading-normal);
  text-transform: uppercase;
}

/* ---- Body Text ---- */

.cc-body {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-base);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-leading-normal);
}

.cc-body-sm {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-sm);
  line-height: var(--cc-leading-normal);
}

.cc-body-lg {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-lg);
  line-height: var(--cc-leading-relaxed);
}

/* ---- Caption & Overline ---- */

.cc-caption {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-leading-normal);
  color: var(--cc-text-muted);
}

.cc-overline {
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  line-height: var(--cc-leading-normal);
  letter-spacing: var(--cc-tracking-widest);
  text-transform: uppercase;
  color: var(--cc-accent-gold);
}

/* ---- Responsive typography scaling ---- */

@media (max-width: 767px) {
  .cc-display    { font-size: var(--cc-text-3xl); }
  .cc-display-sm { font-size: var(--cc-text-2xl); }
  .cc-display-lg { font-size: var(--cc-text-4xl); }
  .cc-h1         { font-size: var(--cc-text-2xl); }
  .cc-h2         { font-size: var(--cc-text-xl);  }
  .cc-h3         { font-size: var(--cc-text-lg);  }
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

/* ---- Base ---- */

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  padding: var(--cc-space-3) var(--cc-space-6);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-semibold);
  line-height: var(--cc-leading-none);
  letter-spacing: var(--cc-tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--cc-radius-md);
  cursor: pointer;
  transition: var(--cc-transition-base);
  user-select: none;
  position: relative;
  overflow: hidden;
}

.cc-btn:focus-visible {
  outline: 2px solid var(--cc-accent-gold);
  outline-offset: 2px;
}

.cc-btn:disabled,
.cc-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ---- Primary (Brand Red) ---- */

.cc-btn-primary {
  background-color: var(--cc-primary);
  color: var(--cc-text-primary);
  border-color: var(--cc-primary);
}

.cc-btn-primary:hover {
  background-color: var(--cc-primary-dark);
  border-color: var(--cc-primary-dark);
  box-shadow: var(--cc-shadow-glow-red);
}

.cc-btn-primary:active {
  background-color: #700000;
  transform: translateY(1px);
}

/* ---- Secondary (Leather) ---- */

.cc-btn-secondary {
  background-color: var(--cc-secondary);
  color: var(--cc-text-dark);
  border-color: var(--cc-secondary);
}

.cc-btn-secondary:hover {
  background-color: var(--cc-secondary-dark);
  border-color: var(--cc-secondary-dark);
  color: var(--cc-text-primary);
}

.cc-btn-secondary:active {
  background-color: #8A5F40;
  transform: translateY(1px);
}

/* ---- Outline ---- */

.cc-btn-outline {
  background-color: transparent;
  color: var(--cc-text-primary);
  border-color: var(--cc-text-secondary);
}

.cc-btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--cc-text-primary);
}

.cc-btn-outline:active {
  background-color: rgba(255, 255, 255, 0.12);
  transform: translateY(1px);
}

/* ---- Ghost ---- */

.cc-btn-ghost {
  background-color: transparent;
  color: var(--cc-text-secondary);
  border-color: transparent;
}

.cc-btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--cc-text-primary);
}

.cc-btn-ghost:active {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(1px);
}

/* ---- Gold (CTA accent) ---- */

.cc-btn-gold {
  background-color: var(--cc-accent-gold);
  color: var(--cc-text-dark);
  border-color: var(--cc-accent-gold);
}

.cc-btn-gold:hover {
  background-color: #C29938;
  border-color: #C29938;
  box-shadow: var(--cc-shadow-glow-gold);
}

.cc-btn-gold:active {
  background-color: #A8872E;
  transform: translateY(1px);
}

/* ---- Sizes ---- */

.cc-btn-sm {
  padding: var(--cc-space-2) var(--cc-space-4);
  font-size: var(--cc-text-xs);
}

.cc-btn-lg {
  padding: var(--cc-space-4) var(--cc-space-8);
  font-size: var(--cc-text-base);
}

/* ---- Icon button ---- */

.cc-btn-icon {
  padding: var(--cc-space-3);
  aspect-ratio: 1;
}

.cc-btn-icon.cc-btn-sm { padding: var(--cc-space-2); }
.cc-btn-icon.cc-btn-lg { padding: var(--cc-space-4); }

/* ---- Full-width ---- */

.cc-btn-block {
  display: flex;
  width: 100%;
}


/* ==========================================================================
   6. UTILITY CLASSES
   ========================================================================== */

/* ------------------------------------------------------------------
   6a. Spacing Utilities (margin & padding)
   Each step maps to the spacing scale:
   0, 1 (4px), 2 (8px), 3 (12px), 4 (16px), 5 (20px),
   6 (24px), 8 (32px), 10 (40px), 12 (48px), 16 (64px), auto
   ------------------------------------------------------------------ */

/* --- Margin --- */
.cc-m-0    { margin: 0; }
.cc-m-1    { margin: var(--cc-space-1); }
.cc-m-2    { margin: var(--cc-space-2); }
.cc-m-3    { margin: var(--cc-space-3); }
.cc-m-4    { margin: var(--cc-space-4); }
.cc-m-5    { margin: var(--cc-space-5); }
.cc-m-6    { margin: var(--cc-space-6); }
.cc-m-8    { margin: var(--cc-space-8); }
.cc-m-10   { margin: var(--cc-space-10); }
.cc-m-12   { margin: var(--cc-space-12); }
.cc-m-16   { margin: var(--cc-space-16); }
.cc-m-auto { margin: auto; }

/* Margin Top */
.cc-mt-0    { margin-top: 0; }
.cc-mt-1    { margin-top: var(--cc-space-1); }
.cc-mt-2    { margin-top: var(--cc-space-2); }
.cc-mt-3    { margin-top: var(--cc-space-3); }
.cc-mt-4    { margin-top: var(--cc-space-4); }
.cc-mt-5    { margin-top: var(--cc-space-5); }
.cc-mt-6    { margin-top: var(--cc-space-6); }
.cc-mt-8    { margin-top: var(--cc-space-8); }
.cc-mt-10   { margin-top: var(--cc-space-10); }
.cc-mt-12   { margin-top: var(--cc-space-12); }
.cc-mt-16   { margin-top: var(--cc-space-16); }

/* Margin Bottom */
.cc-mb-0    { margin-bottom: 0; }
.cc-mb-1    { margin-bottom: var(--cc-space-1); }
.cc-mb-2    { margin-bottom: var(--cc-space-2); }
.cc-mb-3    { margin-bottom: var(--cc-space-3); }
.cc-mb-4    { margin-bottom: var(--cc-space-4); }
.cc-mb-5    { margin-bottom: var(--cc-space-5); }
.cc-mb-6    { margin-bottom: var(--cc-space-6); }
.cc-mb-8    { margin-bottom: var(--cc-space-8); }
.cc-mb-10   { margin-bottom: var(--cc-space-10); }
.cc-mb-12   { margin-bottom: var(--cc-space-12); }
.cc-mb-16   { margin-bottom: var(--cc-space-16); }

/* Margin Left */
.cc-ml-0    { margin-left: 0; }
.cc-ml-1    { margin-left: var(--cc-space-1); }
.cc-ml-2    { margin-left: var(--cc-space-2); }
.cc-ml-3    { margin-left: var(--cc-space-3); }
.cc-ml-4    { margin-left: var(--cc-space-4); }
.cc-ml-6    { margin-left: var(--cc-space-6); }
.cc-ml-8    { margin-left: var(--cc-space-8); }
.cc-ml-auto { margin-left: auto; }

/* Margin Right */
.cc-mr-0    { margin-right: 0; }
.cc-mr-1    { margin-right: var(--cc-space-1); }
.cc-mr-2    { margin-right: var(--cc-space-2); }
.cc-mr-3    { margin-right: var(--cc-space-3); }
.cc-mr-4    { margin-right: var(--cc-space-4); }
.cc-mr-6    { margin-right: var(--cc-space-6); }
.cc-mr-8    { margin-right: var(--cc-space-8); }
.cc-mr-auto { margin-right: auto; }

/* Margin Inline (X) */
.cc-mx-0    { margin-inline: 0; }
.cc-mx-2    { margin-inline: var(--cc-space-2); }
.cc-mx-4    { margin-inline: var(--cc-space-4); }
.cc-mx-6    { margin-inline: var(--cc-space-6); }
.cc-mx-8    { margin-inline: var(--cc-space-8); }
.cc-mx-auto { margin-inline: auto; }

/* Margin Block (Y) */
.cc-my-0    { margin-block: 0; }
.cc-my-2    { margin-block: var(--cc-space-2); }
.cc-my-4    { margin-block: var(--cc-space-4); }
.cc-my-6    { margin-block: var(--cc-space-6); }
.cc-my-8    { margin-block: var(--cc-space-8); }
.cc-my-auto { margin-block: auto; }

/* --- Padding --- */
.cc-p-0   { padding: 0; }
.cc-p-1   { padding: var(--cc-space-1); }
.cc-p-2   { padding: var(--cc-space-2); }
.cc-p-3   { padding: var(--cc-space-3); }
.cc-p-4   { padding: var(--cc-space-4); }
.cc-p-5   { padding: var(--cc-space-5); }
.cc-p-6   { padding: var(--cc-space-6); }
.cc-p-8   { padding: var(--cc-space-8); }
.cc-p-10  { padding: var(--cc-space-10); }
.cc-p-12  { padding: var(--cc-space-12); }
.cc-p-16  { padding: var(--cc-space-16); }

/* Padding Top */
.cc-pt-0   { padding-top: 0; }
.cc-pt-2   { padding-top: var(--cc-space-2); }
.cc-pt-4   { padding-top: var(--cc-space-4); }
.cc-pt-6   { padding-top: var(--cc-space-6); }
.cc-pt-8   { padding-top: var(--cc-space-8); }
.cc-pt-10  { padding-top: var(--cc-space-10); }
.cc-pt-12  { padding-top: var(--cc-space-12); }
.cc-pt-16  { padding-top: var(--cc-space-16); }

/* Padding Bottom */
.cc-pb-0   { padding-bottom: 0; }
.cc-pb-2   { padding-bottom: var(--cc-space-2); }
.cc-pb-4   { padding-bottom: var(--cc-space-4); }
.cc-pb-6   { padding-bottom: var(--cc-space-6); }
.cc-pb-8   { padding-bottom: var(--cc-space-8); }
.cc-pb-10  { padding-bottom: var(--cc-space-10); }
.cc-pb-12  { padding-bottom: var(--cc-space-12); }
.cc-pb-16  { padding-bottom: var(--cc-space-16); }

/* Padding Left */
.cc-pl-0   { padding-left: 0; }
.cc-pl-2   { padding-left: var(--cc-space-2); }
.cc-pl-4   { padding-left: var(--cc-space-4); }
.cc-pl-6   { padding-left: var(--cc-space-6); }
.cc-pl-8   { padding-left: var(--cc-space-8); }

/* Padding Right */
.cc-pr-0   { padding-right: 0; }
.cc-pr-2   { padding-right: var(--cc-space-2); }
.cc-pr-4   { padding-right: var(--cc-space-4); }
.cc-pr-6   { padding-right: var(--cc-space-6); }
.cc-pr-8   { padding-right: var(--cc-space-8); }

/* Padding Inline (X) */
.cc-px-0   { padding-inline: 0; }
.cc-px-2   { padding-inline: var(--cc-space-2); }
.cc-px-4   { padding-inline: var(--cc-space-4); }
.cc-px-6   { padding-inline: var(--cc-space-6); }
.cc-px-8   { padding-inline: var(--cc-space-8); }
.cc-px-10  { padding-inline: var(--cc-space-10); }
.cc-px-12  { padding-inline: var(--cc-space-12); }

/* Padding Block (Y) */
.cc-py-0   { padding-block: 0; }
.cc-py-2   { padding-block: var(--cc-space-2); }
.cc-py-4   { padding-block: var(--cc-space-4); }
.cc-py-6   { padding-block: var(--cc-space-6); }
.cc-py-8   { padding-block: var(--cc-space-8); }
.cc-py-10  { padding-block: var(--cc-space-10); }
.cc-py-12  { padding-block: var(--cc-space-12); }
.cc-py-16  { padding-block: var(--cc-space-16); }
.cc-py-20  { padding-block: var(--cc-space-20); }
.cc-py-24  { padding-block: var(--cc-space-24); }


/* ------------------------------------------------------------------
   6b. Text Alignment
   ------------------------------------------------------------------ */

.cc-text-left    { text-align: left; }
.cc-text-center  { text-align: center; }
.cc-text-right   { text-align: right; }
.cc-text-justify { text-align: justify; }


/* ------------------------------------------------------------------
   6c. Text Colors
   ------------------------------------------------------------------ */

.cc-text-white     { color: var(--cc-text-primary); }
.cc-text-secondary { color: var(--cc-text-secondary); }
.cc-text-muted     { color: var(--cc-text-muted); }
.cc-text-dark      { color: var(--cc-text-dark); }
.cc-text-red       { color: var(--cc-primary); }
.cc-text-gold      { color: var(--cc-accent-gold); }
.cc-text-copper    { color: var(--cc-accent-copper); }
.cc-text-leather   { color: var(--cc-secondary); }


/* ------------------------------------------------------------------
   6d. Background Colors
   ------------------------------------------------------------------ */

.cc-bg-dark      { background-color: var(--cc-bg-dark); }
.cc-bg-darker    { background-color: var(--cc-bg-darker); }
.cc-bg-card      { background-color: var(--cc-bg-card); }
.cc-bg-elevated  { background-color: var(--cc-bg-elevated); }
.cc-bg-wood      { background-color: var(--cc-bg-wood); }
.cc-bg-primary   { background-color: var(--cc-primary); }
.cc-bg-gold      { background-color: var(--cc-accent-gold); }
.cc-bg-leather   { background-color: var(--cc-secondary); }
.cc-bg-transparent { background-color: transparent; }


/* ------------------------------------------------------------------
   6e. Display Utilities
   ------------------------------------------------------------------ */

.cc-d-none          { display: none; }
.cc-d-block         { display: block; }
.cc-d-inline        { display: inline; }
.cc-d-inline-block  { display: inline-block; }
.cc-d-flex          { display: flex; }
.cc-d-inline-flex   { display: inline-flex; }
.cc-d-grid          { display: grid; }

@media (min-width: 576px) {
  .cc-d-sm-none         { display: none; }
  .cc-d-sm-block        { display: block; }
  .cc-d-sm-flex         { display: flex; }
  .cc-d-sm-inline-flex  { display: inline-flex; }
  .cc-d-sm-grid         { display: grid; }
}

@media (min-width: 768px) {
  .cc-d-md-none         { display: none; }
  .cc-d-md-block        { display: block; }
  .cc-d-md-flex         { display: flex; }
  .cc-d-md-inline-flex  { display: inline-flex; }
  .cc-d-md-grid         { display: grid; }
}

@media (min-width: 992px) {
  .cc-d-lg-none         { display: none; }
  .cc-d-lg-block        { display: block; }
  .cc-d-lg-flex         { display: flex; }
  .cc-d-lg-inline-flex  { display: inline-flex; }
  .cc-d-lg-grid         { display: grid; }
}

@media (min-width: 1200px) {
  .cc-d-xl-none         { display: none; }
  .cc-d-xl-block        { display: block; }
  .cc-d-xl-flex         { display: flex; }
}


/* ------------------------------------------------------------------
   6f. Flexbox Utilities
   ------------------------------------------------------------------ */

.cc-flex-row     { flex-direction: row; }
.cc-flex-col     { flex-direction: column; }
.cc-flex-row-rev { flex-direction: row-reverse; }
.cc-flex-col-rev { flex-direction: column-reverse; }
.cc-flex-wrap    { flex-wrap: wrap; }
.cc-flex-nowrap  { flex-wrap: nowrap; }

/* Justify Content */
.cc-justify-start   { justify-content: flex-start; }
.cc-justify-center  { justify-content: center; }
.cc-justify-end     { justify-content: flex-end; }
.cc-justify-between { justify-content: space-between; }
.cc-justify-around  { justify-content: space-around; }
.cc-justify-evenly  { justify-content: space-evenly; }

/* Align Items */
.cc-items-start    { align-items: flex-start; }
.cc-items-center   { align-items: center; }
.cc-items-end      { align-items: flex-end; }
.cc-items-baseline { align-items: baseline; }
.cc-items-stretch  { align-items: stretch; }

/* Align Self */
.cc-self-start   { align-self: flex-start; }
.cc-self-center  { align-self: center; }
.cc-self-end     { align-self: flex-end; }
.cc-self-stretch { align-self: stretch; }

/* Flex Grow / Shrink */
.cc-flex-1       { flex: 1 1 0%; }
.cc-flex-auto    { flex: 1 1 auto; }
.cc-flex-none    { flex: none; }
.cc-flex-grow    { flex-grow: 1; }
.cc-flex-grow-0  { flex-grow: 0; }
.cc-flex-shrink  { flex-shrink: 1; }
.cc-flex-shrink-0 { flex-shrink: 0; }

/* Gap */
.cc-gap-0   { gap: 0; }
.cc-gap-1   { gap: var(--cc-space-1); }
.cc-gap-2   { gap: var(--cc-space-2); }
.cc-gap-3   { gap: var(--cc-space-3); }
.cc-gap-4   { gap: var(--cc-space-4); }
.cc-gap-5   { gap: var(--cc-space-5); }
.cc-gap-6   { gap: var(--cc-space-6); }
.cc-gap-8   { gap: var(--cc-space-8); }
.cc-gap-10  { gap: var(--cc-space-10); }
.cc-gap-12  { gap: var(--cc-space-12); }


/* ------------------------------------------------------------------
   6g. Position Utilities
   ------------------------------------------------------------------ */

.cc-relative { position: relative; }
.cc-absolute { position: absolute; }
.cc-fixed    { position: fixed; }
.cc-sticky   { position: sticky; }
.cc-static   { position: static; }

.cc-inset-0  { inset: 0; }
.cc-top-0    { top: 0; }
.cc-right-0  { right: 0; }
.cc-bottom-0 { bottom: 0; }
.cc-left-0   { left: 0; }


/* ------------------------------------------------------------------
   6h. Sizing Utilities
   ------------------------------------------------------------------ */

.cc-w-full    { width: 100%; }
.cc-w-auto    { width: auto; }
.cc-w-screen  { width: 100vw; }
.cc-h-full    { height: 100%; }
.cc-h-auto    { height: auto; }
.cc-h-screen  { height: 100vh; }
.cc-min-h-screen { min-height: 100vh; }


/* ------------------------------------------------------------------
   6i. Overflow Utilities
   ------------------------------------------------------------------ */

.cc-overflow-hidden  { overflow: hidden; }
.cc-overflow-auto    { overflow: auto; }
.cc-overflow-scroll  { overflow: scroll; }
.cc-overflow-visible { overflow: visible; }
.cc-overflow-x-auto  { overflow-x: auto; }
.cc-overflow-y-auto  { overflow-y: auto; }


/* ------------------------------------------------------------------
   6j. Border & Radius Utilities
   ------------------------------------------------------------------ */

.cc-rounded-none { border-radius: var(--cc-radius-none); }
.cc-rounded-sm   { border-radius: var(--cc-radius-sm); }
.cc-rounded      { border-radius: var(--cc-radius-md); }
.cc-rounded-lg   { border-radius: var(--cc-radius-lg); }
.cc-rounded-xl   { border-radius: var(--cc-radius-xl); }
.cc-rounded-2xl  { border-radius: var(--cc-radius-2xl); }
.cc-rounded-full { border-radius: var(--cc-radius-full); }

.cc-border-0 { border: none; }
.cc-border   { border: 1px solid var(--cc-bg-elevated); }
.cc-border-t { border-top: 1px solid var(--cc-bg-elevated); }
.cc-border-b { border-bottom: 1px solid var(--cc-bg-elevated); }


/* ------------------------------------------------------------------
   6k. Shadow Utilities
   ------------------------------------------------------------------ */

.cc-shadow-none { box-shadow: none; }
.cc-shadow-sm   { box-shadow: var(--cc-shadow-sm); }
.cc-shadow      { box-shadow: var(--cc-shadow-md); }
.cc-shadow-lg   { box-shadow: var(--cc-shadow-lg); }
.cc-shadow-xl   { box-shadow: var(--cc-shadow-xl); }
.cc-shadow-2xl  { box-shadow: var(--cc-shadow-2xl); }


/* ------------------------------------------------------------------
   6l. Opacity & Visibility
   ------------------------------------------------------------------ */

.cc-opacity-0   { opacity: 0; }
.cc-opacity-25  { opacity: 0.25; }
.cc-opacity-50  { opacity: 0.5; }
.cc-opacity-75  { opacity: 0.75; }
.cc-opacity-100 { opacity: 1; }

.cc-visible   { visibility: visible; }
.cc-invisible { visibility: hidden; }


/* ------------------------------------------------------------------
   6m. Cursor
   ------------------------------------------------------------------ */

.cc-cursor-pointer  { cursor: pointer; }
.cc-cursor-default  { cursor: default; }
.cc-cursor-not-allowed { cursor: not-allowed; }


/* ------------------------------------------------------------------
   6n. Text Utilities
   ------------------------------------------------------------------ */

.cc-font-display  { font-family: var(--cc-font-display); }
.cc-font-heading  { font-family: var(--cc-font-heading); }
.cc-font-body     { font-family: var(--cc-font-body); }

.cc-font-light    { font-weight: var(--cc-weight-light); }
.cc-font-regular  { font-weight: var(--cc-weight-regular); }
.cc-font-medium   { font-weight: var(--cc-weight-medium); }
.cc-font-semibold { font-weight: var(--cc-weight-semibold); }
.cc-font-bold     { font-weight: var(--cc-weight-bold); }
.cc-font-black    { font-weight: var(--cc-weight-black); }

.cc-uppercase   { text-transform: uppercase; }
.cc-lowercase   { text-transform: lowercase; }
.cc-capitalize  { text-transform: capitalize; }
.cc-normal-case { text-transform: none; }

.cc-underline    { text-decoration: underline; }
.cc-line-through { text-decoration: line-through; }
.cc-no-underline { text-decoration: none; }

.cc-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cc-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ------------------------------------------------------------------
   6o. Z-Index Utilities
   ------------------------------------------------------------------ */

.cc-z-behind   { z-index: var(--cc-z-behind); }
.cc-z-0        { z-index: var(--cc-z-default); }
.cc-z-raised   { z-index: var(--cc-z-raised); }
.cc-z-dropdown { z-index: var(--cc-z-dropdown); }
.cc-z-sticky   { z-index: var(--cc-z-sticky); }
.cc-z-overlay  { z-index: var(--cc-z-overlay); }
.cc-z-modal    { z-index: var(--cc-z-modal); }
.cc-z-toast    { z-index: var(--cc-z-toast); }


/* ------------------------------------------------------------------
   6p. Accessibility / Screen Reader
   ------------------------------------------------------------------ */

.cc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.cc-not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ==========================================================================
   7. ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* ---- fadeIn ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cc-animate-fadeIn {
  animation: fadeIn var(--cc-duration-base) var(--cc-ease-out) both;
}

/* ---- slideUp ---- */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cc-animate-slideUp {
  animation: slideUp var(--cc-duration-slow) var(--cc-ease-out) both;
}

/* ---- slideInLeft ---- */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.cc-animate-slideInLeft {
  animation: slideInLeft var(--cc-duration-slow) var(--cc-ease-out) both;
}

/* ---- slideInRight ---- */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.cc-animate-slideInRight {
  animation: slideInRight var(--cc-duration-slow) var(--cc-ease-out) both;
}

/* ---- scaleIn ---- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.cc-animate-scaleIn {
  animation: scaleIn var(--cc-duration-base) var(--cc-ease-bounce) both;
}

/* ---- pulse ---- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.cc-animate-pulse {
  animation: pulse 2s var(--cc-ease-in-out) infinite;
}

/* ---- shimmer (loading skeleton) ---- */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.cc-animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--cc-bg-card) 25%,
    var(--cc-bg-elevated) 50%,
    var(--cc-bg-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ---- Animation delay utilities ---- */
.cc-delay-100 { animation-delay: 100ms; }
.cc-delay-200 { animation-delay: 200ms; }
.cc-delay-300 { animation-delay: 300ms; }
.cc-delay-400 { animation-delay: 400ms; }
.cc-delay-500 { animation-delay: 500ms; }
.cc-delay-700 { animation-delay: 700ms; }
.cc-delay-1000 { animation-delay: 1000ms; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   8. COMMON COMPONENT PATTERNS
   ========================================================================== */

/* ---- Card base ---- */
.cc-card {
  background-color: var(--cc-bg-card);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  transition: var(--cc-transition-base);
}

.cc-card:hover {
  box-shadow: var(--cc-shadow-lg);
  transform: translateY(-2px);
}

/* ---- Badge ---- */
.cc-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--cc-space-0-5) var(--cc-space-2);
  font-family: var(--cc-font-heading);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  line-height: var(--cc-leading-normal);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--cc-radius-sm);
  background-color: var(--cc-primary);
  color: var(--cc-text-primary);
}

.cc-badge-gold {
  background-color: var(--cc-accent-gold);
  color: var(--cc-text-dark);
}

.cc-badge-wood {
  background-color: var(--cc-bg-wood);
  color: var(--cc-secondary);
}

/* ---- Divider ---- */
.cc-divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cc-bg-elevated) 20%,
    var(--cc-bg-elevated) 80%,
    transparent
  );
  margin-block: var(--cc-space-6);
}

.cc-divider-gold {
  background: linear-gradient(
    90deg,
    transparent,
    var(--cc-accent-gold) 20%,
    var(--cc-accent-gold) 80%,
    transparent
  );
  opacity: 0.3;
}

/* ---- Overlay ---- */
.cc-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--cc-overlay);
  z-index: var(--cc-z-overlay);
}

.cc-overlay-heavy {
  background-color: var(--cc-overlay-heavy);
}

/* ---- Aspect Ratio Helpers ---- */
.cc-aspect-video    { aspect-ratio: 16 / 9; }
.cc-aspect-poster   { aspect-ratio: 2 / 3; }
.cc-aspect-square   { aspect-ratio: 1 / 1; }
.cc-aspect-wide     { aspect-ratio: 21 / 9; }

/* ---- Object Fit ---- */
.cc-object-cover   { object-fit: cover; }
.cc-object-contain { object-fit: contain; }
.cc-object-center  { object-position: center; }


/* ==========================================================================
   END OF CINECOWBOY DESIGN SYSTEM
   ========================================================================== */