/* QUEST 2026 Live · design tokens
   Source: design mockup https://claude.ai/artifact/CoaUMTPAjx7GkVUsyzAtD7
   Palette is taken from the QUEST 2026 Niigata logo (sunset orange, deep navy, water blue).
   Drop this file in before style.css and replace the hard-coded values there with var(...). */

:root {
  color-scheme: light;

  /* ---- Colour: brand ---- */
  --navy:       #1B2A4A;   /* "2026", "NIIGATA", skyline. Primary text, active tab, NOW card */
  --navy-deep:  #12203A;   /* Live Board background only */
  --sun:        #F0961E;   /* "QUEST", the sun. Fills, NOW kicker, filled star. Never as body text */
  --sun-text:   #A8520A;   /* Orange for text on light surfaces (4.5:1 on cream) */
  --sun-soft:   #FDEBD3;   /* Tinted background: saved star, "Delayed" tag, active filter */
  --gold:       #F7C35B;   /* Time on dark surfaces only (NOW card, board) */
  --water:      #E3EEF5;   /* Reflection blue: announcements, room pills, Wi-Fi card */

  /* ---- Colour: surfaces and text ---- */
  --paper:      #FBF6EE;   /* Page background, warm cream */
  --card:       #FFFFFF;
  --line:       #E6DED0;
  --ink:        var(--navy);
  --muted:      #5A6473;   /* 5.9:1 on white, 5.4:1 on cream */
  --on-dark:    #FFFFFF;
  --on-dark-muted: #C9D3E3;
  --tag-grey:   #E9E4DA;   /* "Cancelled" tag background */
  --ok:         #2E7D5B;   /* Connection dot */

  /* ---- Type ---- */
  --font-display: "Sora", "Manrope", system-ui, sans-serif;   /* headings, times, kickers */
  --font-body:    "Manrope", system-ui, sans-serif;
  --fs-h1:      24px;   /* NOW card title, page title */
  --fs-h2:      22px;
  --fs-h3:      19px;   /* Next card title */
  --fs-card-h:  17px;   /* Info card title */
  --fs-row:     15px;   /* Session title in a list row */
  --fs-clock:   18px;
  --fs-time:    15px;   /* Time on NOW card */
  --fs-body:    14px;
  --fs-sub:     13px;   /* Speaker · room, row times */
  --fs-kicker:  12px;   /* NOW, UP NEXT, DAY 1 */
  --fs-tag:     11px;   /* Delayed, Cancelled, section kickers */
  --ls-kicker:  1.5px;
  --ls-now:     2px;
  --lh-tight:   1.2;
  --lh-body:    1.55;

  /* ---- Radius: three sizes, nothing else ---- */
  --r-card:     16px;   /* cards, nav container, announcement, aside */
  --r-control:  12px;   /* buttons, day chips, search, star, active tab, highlighted row */
  --r-tag:      6px;    /* status tags */
  --r-pill:     999px;  /* room pills */

  /* ---- Size ---- */
  --control-h:  44px;   /* every tappable control: buttons, chips, star, tab row */
  --tab-pad-y:  11px;   /* tab text padding; nav = tab-pad-y*2 + line-height + 2*nav-pad */
  --nav-pad:    4px;
  --star:       44px;
  --logo-h:     44px;   /* header logo; width follows 394:194 ratio (89px) */
  --logo-h-board: 72px;

  /* ---- Spacing ---- */
  --gutter:     20px;   /* page side padding on phones */
  --gap-card:   14px;   /* between stacked cards on Now */
  --gap-list:   12px;   /* between controls and list blocks */
  --gap-row:    12px;   /* grid gap inside a list row */
  --row-pad-y:  12px;
  --card-pad:   18px;   /* white cards */
  --card-pad-now: 20px; /* NOW card */
  --header-pad: 12px 20px 10px;
  --row-cols:   56px minmax(0, 1fr) var(--star);   /* time · text · star */

  /* ---- Layout ---- */
  --content-max: 1080px;
  --board-pad:  44px 48px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:      #0F1B2E;
    --card:       #172A44;
    --line:       #2B4059;
    --ink:        #EAF0F5;
    --muted:      #A9BACB;
    --water:      #1E3550;
    --sun-text:   #F7C35B;   /* orange text flips to gold on dark */
    --sun-soft:   #3A2E1C;
    --tag-grey:   #2B3646;
    --navy:       #2A4670;   /* NOW card lifts off the dark page; keep a 1px gold border on it */
    --on-dark-muted: #C9D3E3;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0F1B2E; --card: #172A44; --line: #2B4059; --ink: #EAF0F5; --muted: #A9BACB;
  --water: #1E3550; --sun-text: #F7C35B; --sun-soft: #3A2E1C; --tag-grey: #2B3646; --navy: #2A4670;
}

/* ---- Reference: how the tokens map onto the existing class names in public/style.css ---- */
/*
.topbar        background var(--card); border-bottom 1px var(--line); padding var(--header-pad); logo height var(--logo-h)
.clock         font var(--font-display) 700 var(--fs-clock)
.status        font-size var(--fs-kicker); color var(--muted); dot 7px var(--ok)
.eyebrow       DAY 1 · MONDAY 19 OCTOBER: var(--fs-kicker) 700, letter-spacing var(--ls-kicker), color var(--sun-text)
.navigation    background var(--card); border 1px var(--line); radius var(--r-card); padding var(--nav-pad); gap 2px
.navigation a  flex 1 1 0; padding var(--tab-pad-y) 0; radius var(--r-control); white-space nowrap; font 600 13px
.navigation a[aria-current=page]  background var(--navy); color var(--on-dark)
               labels: Now · Program · Saved · Info  (never "My schedule": it wraps at 390px)
.card          background var(--card); border 1px var(--line); radius var(--r-card); padding var(--card-pad)
.now-card      background var(--navy); color var(--on-dark); padding var(--card-pad-now); no border
               kicker NOW: var(--font-display) 800 var(--fs-kicker), letter-spacing var(--ls-now), color var(--sun)
               time: var(--font-display) 700 var(--fs-time), color var(--gold)
.pill          radius var(--r-pill); padding 4px 10px; 12px 600; background var(--water)  (on .now-card: rgba(255,255,255,.14))
.announcement  background var(--water); radius var(--r-card); padding 14px 16px; icon 18px var(--ink); no left border
.day-tabs button, .action   min-height var(--control-h); radius var(--r-control); border 1px var(--line); background var(--card)
.day-tabs button[aria-pressed=true]  background var(--navy); color var(--on-dark)
.search        min-height var(--control-h); radius var(--r-control); border 1px var(--line)
.program-row   grid-template-columns var(--row-cols); gap var(--gap-row); padding var(--row-pad-y) 0; border-top 1px var(--line)
.program-row.current  background var(--navy); color var(--on-dark); radius var(--r-control); padding 12px 10px; margin 0 -10px; no border-top
.program-row.delayed .time   new time in var(--sun-text); original time line-through in var(--muted)
.program-row.cancelled       color var(--muted); title line-through; star disabled, opacity .5
.tag           radius var(--r-tag); padding 3px 8px; var(--fs-tag) 700
.tag.delayed   background var(--sun-soft); color var(--sun-text)
.tag.cancelled background var(--tag-grey); color var(--muted)
.save          width/height var(--star); radius var(--r-control); border 1px var(--line); background var(--card); inline SVG star, not ★ glyph
.save[aria-pressed=true]     background var(--sun-soft); star fill var(--sun), stroke var(--sun-text)
.board         background var(--navy-deep); padding var(--board-pad); logo in a white chip radius var(--r-card)
               clock var(--font-display) 800 56px; NOW panel background #1B2A4A radius 24px; announcement strip background var(--sun), color var(--navy-deep)
*/