/* DNEG AI Roadmap: design tokens.
   The first :root block is copied verbatim from the Gate LLM presentation
   (dneg-llm/docs/presentation/gate-llm-overview.html, develop). Do not edit it here;
   change the presentation first and re-copy. Dark is the default theme. */
:root {
  --bg: #070a12;
  --bg2: #0c1120;
  --panel: #111829;
  --panel2: #161f33;
  --line: #243149;
  --fg: #e4eaf6;
  --muted: #8d9ab2;
  --accent: #4f8df5;      /* Gate's blue, lifted for a dark room */
  --accent2: #8fc3ff;
  --human: #f2b544;       /* the person: approvals, cards */
  --ok: #38c97e;
  --bad: #f05d5d;
  --user: #2d3042;
  --font: 'IBM Plex Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: dark;
}

/* Site additions: layout metrics and the translucent surfaces the presentation wrote as literals.
   Components in site.css and css/views/*.css use these instead of hard-coded rgba() values. */
:root {
  --maxw: 1240px;             /* content column, same as the presentation's .inner */
  --maxw-layout: 1440px;      /* layout with a rail */
  --rail-w: 250px;
  --topbar-h: 54px;           /* fixed top bar; site.css raises it on narrow screens */
  --radius: 12px;
  --glass: rgba(12,17,32,.7);         /* presentation .hud .pill background */
  --glass-strong: rgba(12,17,32,.9);
  --scrim: rgba(7,10,18,.94);         /* presentation #help / #overview backdrop */
  --glow1: rgba(79,141,245,.14);      /* presentation #bg::after, lower glow */
  --glow2: rgba(143,195,255,.08);     /* presentation #bg::after, upper glow */
  --on-accent: #fff;                  /* text on a solid --accent button */
  --title-from: #fff;                 /* presentation #s0 h1 gradient, top colour */
  --shadow: 0 30px 80px rgba(0,0,0,.5);
}

/* DNEG cosmic theme (30 Oct 2026): the keynote's palette, taken from the Ramayana key art and the DNEG wordmark:
   deep space black, nebula cyan and blue for AI, ember orange and red for the craft, a violet haze between them.
   It overrides the Gate palette above for the whole site, so the keynote and the lenses read as one experience.
   Delete this block (and the matching lines in the light scheme) to go back to Gate's palette. */
:root {
  --bg: #04050a;
  --bg2: #080a12;
  --panel: #0d1019;
  --panel2: #131826;
  --line: #222a3d;
  --fg: #eef2f8;
  --muted: #949fb6;
  --accent: #22b3e6;      /* nebula cyan */
  --accent2: #8be3f4;     /* light cyan */
  --warm: #ff8a3d;        /* ember orange: the craft, and "before" in comparisons */
  --ember: #e4472f;       /* deep red */
  --violet: #9b5de5;      /* the haze between the two */
  --glass: rgba(8,10,18,.72);
  --glass-strong: rgba(8,10,18,.92);
  --scrim: rgba(4,5,10,.95);
  --glow1: rgba(34,179,230,.16);
  --glow2: rgba(255,138,61,.10);
  --on-accent: #031018;   /* dark text on cyan; white on cyan fails contrast */
}

/* Optional light scheme (Phase 2 will expose a toggle). Set data-theme="light" on <html>,
   or open index.html?theme=light. Values keep the same hues with enough contrast on white. */
:root[data-theme="light"] {
  --bg: #f4f6fb;
  --bg2: #e9edf6;
  --panel: #ffffff;
  --panel2: #eef2fa;
  --line: #d3dae8;
  --fg: #111a2c;
  --muted: #55617a;
  --accent: #2f6fd0;
  --accent2: #1d56ad;
  --human: #a86d00;
  --ok: #178a52;
  --bad: #c93030;
  --user: #e2e6f0;
  --glass: rgba(255,255,255,.78);
  --glass-strong: rgba(255,255,255,.94);
  --scrim: rgba(244,246,251,.96);
  --glow1: rgba(47,111,208,.10);
  --glow2: rgba(29,86,173,.06);
  --title-from: #0b1220;
  --shadow: 0 24px 60px rgba(20,32,60,.16);
  --accent: #0a7fb0;      /* DNEG cosmic theme, light: cyan with contrast on white */
  --accent2: #075e86;
  --warm: #c25a12;
  --ember: #b3321f;
  --violet: #6b3fb3;
  --on-accent: #fff;
  color-scheme: light;
}