/* ============================================================
   LGF — Brand Guidelines · Design tokens
   All adjustable values live here, in :root, grouped & named.
   The active channel colour drives the whole document.
   ============================================================ */

/* ---- Fonts -------------------------------------------------- */
@font-face {
  font-family: "DIN Condensed";
  src: url("../assets/fonts/DIN_Condensed_VF.otf") format("opentype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/SourceSans3-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ====== 1. CHANNEL SIGNATURE COLOURS ====== */
  --lgf-talk:   #3E38FA;   /* electric blue  */
  --lgf-fun:    #FF0040;   /* vivid red      */
  --lgf-pop:    #FF8000;   /* orange         */
  --lgf-stream: #FFD600;   /* yellow         */
  --lgf-cine:   #000000;   /* black          */

  /* ====== 2. ACTIVE CHANNEL (derived) ======
     --accent is set per-channel via [data-channel] below.
     --on-accent (black/white) is computed by luminance in JS. */
  --accent: var(--lgf-talk);
  --on-accent: #ffffff;

  /* Tint scale, auto-generated from --accent (dark → light) */
  --accent-900: color-mix(in oklab, var(--accent), #000 62%);
  --accent-800: color-mix(in oklab, var(--accent), #000 46%);
  --accent-700: color-mix(in oklab, var(--accent), #000 28%);
  --accent-600: color-mix(in oklab, var(--accent), #000 12%);
  --accent-500: var(--accent);
  --accent-400: color-mix(in oklab, var(--accent), #fff 22%);
  --accent-300: color-mix(in oklab, var(--accent), #fff 42%);
  --accent-200: color-mix(in oklab, var(--accent), #fff 62%);
  --accent-100: color-mix(in oklab, var(--accent), #fff 80%);
  --accent-50:  color-mix(in oklab, var(--accent), #fff 92%);

  /* ====== 3. NEUTRALS (the écrin stays sober) ====== */
  --bg:          #ffffff;
  --surface:     #f5f5f5;   /* soft mist  */
  --surface-2:   #ebebeb;
  --ink:         #111111;   /* obsidian   */
  --ink-2:       #2b2b2d;
  --muted:       #707072;   /* steel      */
  --faint:       #9e9ea0;
  --border:      #e5e5e5;   /* concrete   */
  --border-strong:#cfcfd1;

  /* Grey scale */
  --grey-1000: #111111;
  --grey-900:  #2b2b2d;
  --grey-700:  #5a5a5c;
  --grey-500:  #707072;
  --grey-300:  #9e9ea0;
  --grey-200:  #cfcfd1;
  --grey-100:  #e5e5e5;
  --grey-50:   #f5f5f5;

  /* ====== 4. TYPE ====== */
  --font-impact: "DIN Condensed", "Oswald", "Saira Condensed", sans-serif;
  --font-text:   "Source Sans 3", system-ui, -apple-system, sans-serif;
  --font-mono:   "Söhne Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* Display / impact (DIN) sizes */
  --t-mega:    clamp(4rem, 11vw, 11rem);    /* cover wordmark    */
  --t-display: clamp(3rem, 7vw, 6.5rem);    /* section numbers   */
  --t-h1:      clamp(2.4rem, 4.4vw, 4rem);
  --t-h2:      clamp(1.7rem, 2.6vw, 2.4rem);
  --t-label:   0.82rem;                      /* DIN caps labels   */

  /* Reading (Source Sans) sizes */
  --t-lead:    clamp(1.15rem, 1.5vw, 1.5rem);
  --t-body:    1.0625rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-micro:   0.6875rem;

  /* Weights */
  --w-reg: 400;
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-din-med: 500;
  --w-din-bold: 700;
  --w-din-black: 800;

  /* Leading & tracking */
  --lh-tight: 0.92;
  --lh-snug: 1.08;
  --lh-body: 1.6;
  --tr-label: 0.14em;   /* DIN caps tracking */
  --tr-tight: -0.01em;

  /* ====== 5. LAYOUT ====== */
  --sidebar-w: 296px;
  --content-max: 1080px;
  --gutter: 32px;
  --pad-x: clamp(24px, 5vw, 72px);

  /* spacing scale (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* radii — sharp by default (gallery), pills for buttons/tags */
  --r-card: 0px;
  --r-frame: 2px;
  --r-pill: 999px;

  /* ====== 6. MOTION ====== */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-in: 420ms;
  --dur-out: 200ms;
  --stagger: 55ms;
}

/* ====== Channel switching: one variable reteints everything ====== */
[data-channel="talk"]   { --accent: var(--lgf-talk);   }
[data-channel="fun"]    { --accent: var(--lgf-fun);    }
[data-channel="pop"]    { --accent: var(--lgf-pop);    }
[data-channel="stream"] { --accent: var(--lgf-stream); }
[data-channel="cine"]   { --accent: var(--lgf-cine);   }