/* ==========================================================================
   Over-The-Top — Design Tokens
   The single source of truth for colour, type, space, and elevation.
   Derived from the 2026 brand ad: deep space black, cosmic violet, ember
   orange, and chromed display type.
   ========================================================================== */

:root {
  /* ---- Space / surfaces -------------------------------------------------- */
  --ink-900: #030208;   /* page floor */
  --ink-800: #07040f;   /* deep panel */
  --ink-700: #0d0819;   /* raised panel */
  --ink-600: #140d26;   /* card */
  --ink-500: #1e1436;   /* card, hovered */
  --ink-400: #2b1e4d;   /* hairline / divider */

  /* ---- Cosmic violet ----------------------------------------------------- */
  --violet-200: #E3CCFF;
  --violet-300: #C99BFF;
  --violet-400: #B072FF;
  --violet-500: #A855F7;  /* neon edge */
  --violet-600: #8B33F0;  /* core brand violet */
  --violet-700: #6D28D9;
  --violet-900: #2A0F5E;

  /* ---- Ember orange (accent / highlight word) ---------------------------- */
  --ember-200: #FFD5A8;
  --ember-300: #FFB067;
  --ember-400: #FF9330;
  --ember-500: #F97316;   /* primary accent */
  --ember-600: #E35D05;

  /* ---- Chrome (display type + bezels) ------------------------------------ */
  --chrome-100: #FFFFFF;
  --chrome-200: #EEF0F5;
  --chrome-300: #CBD1DC;
  --chrome-400: #98A0B0;
  --chrome-500: #666E7E;

  /* ---- Text -------------------------------------------------------------- */
  --text:       #EAECF2;
  --text-dim:   #A7ADBC;
  --text-faint: #6E7488;

  /* ---- Semantic ---------------------------------------------------------- */
  --bg:            var(--ink-900);
  --surface:       var(--ink-700);
  --surface-raised:var(--ink-600);
  --border:        rgba(168, 85, 247, 0.20);
  --border-strong: rgba(168, 85, 247, 0.45);
  --accent:        var(--ember-500);
  --brand:         var(--violet-600);

  /* ---- Gradients --------------------------------------------------------- */
  --grad-chrome: linear-gradient(
    180deg,
    #FFFFFF 0%, #FFFFFF 42%, #9DA7BB 53%,
    #FCFDFF 61%, #FFFFFF 84%, #C9CFDC 100%
  );
  --grad-ember: linear-gradient(180deg, #FFC98A 0%, #FF9330 45%, #F97316 60%, #FFB067 100%);
  --grad-violet: linear-gradient(135deg, var(--violet-600), var(--violet-400));
  --grad-bezel: linear-gradient(160deg, #FFFFFF, #A8B0C0 40%, #4A5162 62%, #D8DDE6 100%);
  --grad-rule: linear-gradient(90deg, transparent, var(--violet-500) 45%, var(--ember-400) 55%, transparent);

  /* ---- Glow / elevation -------------------------------------------------- */
  --glow-violet: 0 0 28px rgba(168, 85, 247, 0.45);
  --glow-ember:  0 0 26px rgba(249, 115, 22, 0.45);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 18px 46px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);

  /* ---- Type -------------------------------------------------------------- */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid scale — clamp(min, preferred, max) */
  --fs-hero:   clamp(1.3rem, 0.7rem + 2.8vw, 3rem);
  --fs-h1:     clamp(2.1rem, 1.25rem + 4.1vw, 4.6rem);
  --fs-h2:     clamp(1.7rem, 1.15rem + 2.6vw, 3.2rem);
  --fs-h3:     clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-lead:   clamp(1.05rem, 0.98rem + 0.42vw, 1.35rem);
  --fs-body:   clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --fs-sm:     0.9375rem;
  --fs-xs:     0.8125rem;
  --fs-eyebrow:clamp(0.75rem, 0.7rem + 0.18vw, 0.875rem);

  /* ---- Space (8pt base) --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-y: clamp(4rem, 2rem + 8vw, 8.5rem);

  /* ---- Layout ------------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1400px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---- Radius ------------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 620ms;

  /* ---- Chrome / z-index --------------------------------------------------- */
  --z-bg: 0;
  --z-content: 1;
  --z-sticky: 50;
  --z-nav: 100;
  --z-overlay: 200;
}