/* ============================================
   DRAMATIC DA DJ — DESIGN TOKENS
   Locked from Phase 3 Brand Book
   ============================================ */

:root {
  /* -----------------------------------
     TYPE SCALE (fluid)
     ----------------------------------- */
  --text-xs:    clamp(0.75rem,  0.7rem + 0.25vw,  0.875rem);
  --text-sm:    clamp(0.875rem, 0.8rem + 0.35vw,  1rem);
  --text-base:  clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1rem + 0.75vw,    1.5rem);
  --text-xl:    clamp(1.5rem,   1.2rem + 1.25vw,  2.25rem);
  --text-2xl:   clamp(2rem,     1.2rem + 2.5vw,   3.5rem);
  --text-3xl:   clamp(2.5rem,   1rem + 4vw,       5rem);
  --text-hero:  clamp(3rem,     0.5rem + 7vw,     8.5rem);

  /* -----------------------------------
     FONT FAMILIES
     Bebas Neue → cinematic display
     Playfair Display → editorial serif
     Inter → utility body
     ----------------------------------- */
  --font-display:   'Bebas Neue', 'Impact', sans-serif;
  --font-editorial: 'Playfair Display', 'Georgia', serif;
  --font-body:      'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* -----------------------------------
     4px SPACING SYSTEM
     ----------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* -----------------------------------
     BRAND COLOR SYSTEM (Phase 3 locked)
     ----------------------------------- */

  /* Raw brand colors */
  --brand-orange:      #E56321;   /* Knicks Orange */
  --brand-orange-hot:  #FF7A38;   /* Hover state, brighter */
  --brand-blue:        #1D3D8F;   /* Knicks Blue */
  --brand-blue-deep:   #142B65;   /* Deeper for hover */
  --brand-copper:      #B87333;   /* Copper Bronze */
  --brand-copper-lite: #D18F4A;
  --brand-chrome:      #C9CDD2;   /* Chrome Silver */
  --brand-chrome-dim:  #8A8F97;
  --brand-navy:        #0B1330;   /* Night Navy */
  --brand-navy-deep:   #06091C;   /* Deepest navy */
  --brand-cream:       #F2E8D5;   /* Studio Cream */
  --brand-cream-warm:  #E8DAB8;
  --brand-ink:         #05070F;   /* Near-black */

  /* -----------------------------------
     SEMANTIC COLOR TOKENS — LIGHT (Cream)
     Default = dark mode. Light mode via [data-theme="light"]
     ----------------------------------- */
}

/* ============================================
   DARK MODE (DEFAULT) — Night Navy dominant
   ============================================ */
:root,
[data-theme="dark"] {
  /* Surfaces */
  --color-bg:            var(--brand-navy);
  --color-surface:       #10193F;
  --color-surface-2:     #172251;
  --color-surface-3:     #1E2C64;
  --color-surface-offset: var(--brand-navy-deep);
  --color-divider:       rgba(201, 205, 210, 0.08);
  --color-border:        rgba(201, 205, 210, 0.14);
  --color-border-strong: rgba(201, 205, 210, 0.28);

  /* Text */
  --color-text:          var(--brand-cream);
  --color-text-strong:   #FFFFFF;
  --color-text-muted:    #B8BDCC;
  --color-text-faint:    #6E7594;
  --color-text-inverse:  var(--brand-navy);

  /* Primary accent (Knicks Orange) */
  --color-primary:       var(--brand-orange);
  --color-primary-hover: var(--brand-orange-hot);
  --color-primary-highlight: rgba(229, 99, 33, 0.18);
  --color-primary-text:  #FFFFFF;

  /* Secondary accent (Copper) */
  --color-secondary:     var(--brand-copper);
  --color-secondary-hover: var(--brand-copper-lite);

  /* Detail chrome */
  --color-detail:        var(--brand-chrome);
  --color-detail-dim:    var(--brand-chrome-dim);

  /* Shadows on dark */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-glow-orange: 0 0 40px rgba(229, 99, 33, 0.35);

  /* Overlays */
  --overlay-hero: linear-gradient(
    to bottom,
    rgba(6, 9, 28, 0.35) 0%,
    rgba(6, 9, 28, 0.55) 60%,
    rgba(11, 19, 48, 0.92) 100%
  );
  --overlay-image: linear-gradient(
    to top,
    rgba(6, 9, 28, 0.88) 0%,
    rgba(6, 9, 28, 0.15) 60%,
    transparent 100%
  );
}

/* ============================================
   LIGHT MODE — Studio Cream dominant
   ============================================ */
[data-theme="light"] {
  --color-bg:            var(--brand-cream);
  --color-surface:       #FAF3E1;
  --color-surface-2:     #FFFBED;
  --color-surface-3:     #FFFFFF;
  --color-surface-offset: #E8DAB8;
  --color-divider:       rgba(11, 19, 48, 0.10);
  --color-border:        rgba(11, 19, 48, 0.18);
  --color-border-strong: rgba(11, 19, 48, 0.35);

  --color-text:          var(--brand-navy);
  --color-text-strong:   var(--brand-ink);
  --color-text-muted:    #3D4568;
  --color-text-faint:    #7A8098;
  --color-text-inverse:  var(--brand-cream);

  --color-primary:       var(--brand-orange);
  --color-primary-hover: #C24E15;
  --color-primary-highlight: rgba(229, 99, 33, 0.14);
  --color-primary-text:  #FFFFFF;

  --color-secondary:     var(--brand-copper);
  --color-secondary-hover: #955F26;

  --color-detail:        var(--brand-chrome-dim);
  --color-detail-dim:    var(--brand-chrome);

  --shadow-sm: 0 1px 2px rgba(11, 19, 48, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 19, 48, 0.10), 0 2px 4px rgba(11, 19, 48, 0.06);
  --shadow-lg: 0 24px 60px rgba(11, 19, 48, 0.14), 0 4px 12px rgba(11, 19, 48, 0.08);
  --shadow-glow-orange: 0 0 40px rgba(229, 99, 33, 0.30);

  --overlay-hero: linear-gradient(
    to bottom,
    rgba(11, 19, 48, 0.25) 0%,
    rgba(11, 19, 48, 0.45) 60%,
    rgba(11, 19, 48, 0.85) 100%
  );
  --overlay-image: linear-gradient(
    to top,
    rgba(11, 19, 48, 0.75) 0%,
    rgba(11, 19, 48, 0.10) 60%,
    transparent 100%
  );
}

/* System preference fallback */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:            var(--brand-cream);
    --color-surface:       #FAF3E1;
    --color-surface-2:     #FFFBED;
    --color-surface-3:     #FFFFFF;
    --color-surface-offset: #E8DAB8;
    --color-divider:       rgba(11, 19, 48, 0.10);
    --color-border:        rgba(11, 19, 48, 0.18);
    --color-border-strong: rgba(11, 19, 48, 0.35);
    --color-text:          var(--brand-navy);
    --color-text-strong:   var(--brand-ink);
    --color-text-muted:    #3D4568;
    --color-text-faint:    #7A8098;
    --color-text-inverse:  var(--brand-cream);
    --color-primary-hover: #C24E15;
    --color-detail:        var(--brand-chrome-dim);
    --color-detail-dim:    var(--brand-chrome);
  }
}

/* ============================================
   RADII, TRANSITIONS, CONTENT WIDTHS
   ============================================ */
:root {
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:        380ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-hero:        700ms cubic-bezier(0.16, 1, 0.3, 1);

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  --content-narrow:  680px;
  --content-default: 1100px;
  --content-wide:    1360px;
  --content-full:    100%;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 10vw, 8rem);
}