/* =====================================================================
   FloorBoard — design tokens (the ONE source of truth) · UI 2.0
   =====================================================================
   Loaded before styles.css / ui2.css. Every colour, radius and size in the
   app — the CSS *and* the canvas renderer (js/00-theme.js reads these at
   runtime) — comes from here. Light is the default; dark applies when
   <html data-theme="dark"> is set, or when the OS prefers dark and no
   explicit choice was made.

   UI 2.0
   - Type: Geist (UI) and Geist Mono (numbers: focal lengths, timecode,
     zoom), self-hosted in /fonts (SIL OFL — see fonts/OFL.txt).
   - Neutrals: cool, Apple-like greys. Canvas #F7F7F8 with a dot grid.
   - One colour per floor. <html data-floor="…"> (set by switchTab) swaps
     the accent, so buttons, selection and chips carry the floor's hue:
     Mood coral · Script violet · Shot designer blue · Shot list teal ·
     Budget green · Production orange.
   - Radii: 10 on controls, 14 on cards, 22 on the floating panels.
   ===================================================================== */
@font-face{ font-family:"Geist"; src:url("./fonts/Geist-Variable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Geist Mono"; src:url("./fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; }
:root{
  --font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* surfaces */
  --bg:#F7F7F8;          /* canvas paper and the gutters around the floating panels */
  --panel:#FFFFFF;       /* panels, popovers */
  --card:#FFFFFF;        /* canvas cards */
  --hover:#F5F5F7;
  --soft:#F2F2F4;        /* fields, chips, segmented tracks */
  --soft2:#E9E9EC;       /* the floor switcher track */
  --grid:#DADADF;        /* canvas grid dots */
  --line:#E8E8EC;        /* hairlines */
  --line2:#D5D5DB;       /* stronger strokes, card outlines */
  /* text */
  --ink:#1D1D1F;
  --body:#3A3A3F;
  --ink2:#5F5F66;
  --ink3:#8E8E95;
  /* placeholders (ink at alpha) */
  --ph30:rgba(29,29,31,.30);
  --ph35:rgba(29,29,31,.35);
  --ph40:rgba(29,29,31,.40);
  --chip:rgba(255,255,255,.92);      /* floating chips on canvas */
  --glass:rgba(255,255,255,.78);     /* the top bar */
  --toast:#1D1D1F; --toast-ink:#FFFFFF;
  /* floors */
  --f-mood:#FF5E57; --f-write:#A259FF; --f-design:#0A7CFF; --f-shots:#14A8C2; --f-budget:#2DB45A; --f-org:#FF9500;
  /* semantic — accent follows the floor (below) */
  --accent:#0A7CFF; --accent-ink:#096BDB; --accent-soft:#E2EFFF; --accent-08:rgba(10,124,255,.08); --accent-glow:rgba(10,124,255,.34);
  --danger:#E5484D; --danger-soft:#FDECEC; --danger-line:#F5B5B7;
  --warn:#E69F00;  --warn-soft:#FDF4E1;
  --ok:#1FA855;    --ok-soft:#E4F6EA;
  --on-accent:#FFFFFF;
  /* shape */
  --r-xs:7px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-panel:22px; --r-pill:999px;
  --r-card:12;           /* canvas roundRect radius, unitless */
  /* size & type */
  --tap:34px;            /* minimum control height with a mouse; touch bumps to 44 */
  --fs:13.5px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(20,20,40,.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(20,20,40,.07);
  --shadow-lg:0 24px 70px rgba(20,20,40,.20);
  /* legacy aliases (older rules still reference these) */
  --border:var(--line); --border2:var(--line2); --radius:var(--r-md);
  color-scheme:light;
}
:root[data-floor="mood"]{ --accent:#FF5E57; --accent-ink:#DB514B; --accent-soft:#FFECEB; --accent-08:rgba(255,94,87,.08); --accent-glow:rgba(255,94,87,.34); }
:root[data-floor="write"]{ --accent:#A259FF; --accent-ink:#8B4DDB; --accent-soft:#F4EBFF; --accent-08:rgba(162,89,255,.08); --accent-glow:rgba(162,89,255,.34); }
:root[data-floor="design"]{ --accent:#0A7CFF; --accent-ink:#096BDB; --accent-soft:#E2EFFF; --accent-08:rgba(10,124,255,.08); --accent-glow:rgba(10,124,255,.34); }
:root[data-floor="shots"]{ --accent:#14A8C2; --accent-ink:#1190A7; --accent-soft:#E3F5F8; --accent-08:rgba(20,168,194,.08); --accent-glow:rgba(20,168,194,.34); }
:root[data-floor="budget"]{ --accent:#2DB45A; --accent-ink:#279B4D; --accent-soft:#E6F6EB; --accent-08:rgba(45,180,90,.08); --accent-glow:rgba(45,180,90,.34); }
:root[data-floor="org"]{ --accent:#FF9500; --accent-ink:#DB8000; --accent-soft:#FFF2E0; --accent-08:rgba(255,149,0,.08); --accent-glow:rgba(255,149,0,.34); }

/* ---------- dark ---------- */
:root[data-theme="dark"]{
  --bg:#18181B; --panel:#1F1F22; --card:#26262A; --hover:#2A2A2E; --soft:#2A2A2E; --soft2:#333338;
  --grid:#2E2E33; --line:#2C2C31; --line2:#3A3A40;
  --ink:#F5F5F7; --body:#DCDCE0; --ink2:#AEAEB5; --ink3:#7C7C84;
  --ph30:rgba(245,245,247,.30); --ph35:rgba(245,245,247,.35); --ph40:rgba(245,245,247,.40);
  --chip:rgba(38,38,42,.92); --glass:rgba(31,31,34,.80);
  --toast:#F5F5F7; --toast-ink:#1F1F22;
  --accent:#278CFF; --accent-ink:#54A3FF; --accent-soft:#1A3353; --accent-08:rgba(10,124,255,.14); --accent-glow:rgba(10,124,255,.4);
  --danger:#FF6B5E; --danger-soft:#3D2220; --danger-line:#6B332E;
  --warn:#FFB340; --warn-soft:#3D3120;
  --ok:#3DD06C; --ok-soft:#1B3A25;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:0 24px 70px rgba(0,0,0,.6);
  color-scheme:dark;
}
:root[data-theme="dark"][data-floor="mood"]{ --accent:#FF716B; --accent-ink:#FF8E89; --accent-soft:#502D2E; --accent-08:rgba(255,94,87,.14); --accent-glow:rgba(255,94,87,.4); }
:root[data-theme="dark"][data-floor="write"]{ --accent:#AD6DFF; --accent-ink:#BE8BFF; --accent-soft:#3C2C53; --accent-08:rgba(162,89,255,.14); --accent-glow:rgba(162,89,255,.4); }
:root[data-theme="dark"][data-floor="design"]{ --accent:#278CFF; --accent-ink:#54A3FF; --accent-soft:#1A3353; --accent-08:rgba(10,124,255,.14); --accent-glow:rgba(10,124,255,.4); }
:root[data-theme="dark"][data-floor="shots"]{ --accent:#30B2C9; --accent-ink:#5AC2D4; --accent-soft:#1D3D45; --accent-08:rgba(20,168,194,.14); --accent-glow:rgba(20,168,194,.4); }
:root[data-theme="dark"][data-floor="budget"]{ --accent:#46BD6E; --accent-ink:#6CCA8C; --accent-soft:#22402E; --accent-08:rgba(45,180,90,.14); --accent-glow:rgba(45,180,90,.4); }
:root[data-theme="dark"][data-floor="org"]{ --accent:#FFA21F; --accent-ink:#FFB54C; --accent-soft:#50391B; --accent-08:rgba(255,149,0,.14); --accent-glow:rgba(255,149,0,.4); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --bg:#18181B; --panel:#1F1F22; --card:#26262A; --hover:#2A2A2E; --soft:#2A2A2E; --soft2:#333338;
  --grid:#2E2E33; --line:#2C2C31; --line2:#3A3A40;
  --ink:#F5F5F7; --body:#DCDCE0; --ink2:#AEAEB5; --ink3:#7C7C84;
  --ph30:rgba(245,245,247,.30); --ph35:rgba(245,245,247,.35); --ph40:rgba(245,245,247,.40);
  --chip:rgba(38,38,42,.92); --glass:rgba(31,31,34,.80);
  --toast:#F5F5F7; --toast-ink:#1F1F22;
  --accent:#278CFF; --accent-ink:#54A3FF; --accent-soft:#1A3353; --accent-08:rgba(10,124,255,.14); --accent-glow:rgba(10,124,255,.4);
  --danger:#FF6B5E; --danger-soft:#3D2220; --danger-line:#6B332E;
  --warn:#FFB340; --warn-soft:#3D3120;
  --ok:#3DD06C; --ok-soft:#1B3A25;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:0 24px 70px rgba(0,0,0,.6);
  color-scheme:dark;
  }
  :root:not([data-theme="light"])[data-floor="mood"]{ --accent:#FF716B; --accent-ink:#FF8E89; --accent-soft:#502D2E; --accent-08:rgba(255,94,87,.14); --accent-glow:rgba(255,94,87,.4); }
  :root:not([data-theme="light"])[data-floor="write"]{ --accent:#AD6DFF; --accent-ink:#BE8BFF; --accent-soft:#3C2C53; --accent-08:rgba(162,89,255,.14); --accent-glow:rgba(162,89,255,.4); }
  :root:not([data-theme="light"])[data-floor="design"]{ --accent:#278CFF; --accent-ink:#54A3FF; --accent-soft:#1A3353; --accent-08:rgba(10,124,255,.14); --accent-glow:rgba(10,124,255,.4); }
  :root:not([data-theme="light"])[data-floor="shots"]{ --accent:#30B2C9; --accent-ink:#5AC2D4; --accent-soft:#1D3D45; --accent-08:rgba(20,168,194,.14); --accent-glow:rgba(20,168,194,.4); }
  :root:not([data-theme="light"])[data-floor="budget"]{ --accent:#46BD6E; --accent-ink:#6CCA8C; --accent-soft:#22402E; --accent-08:rgba(45,180,90,.14); --accent-glow:rgba(45,180,90,.4); }
  :root:not([data-theme="light"])[data-floor="org"]{ --accent:#FFA21F; --accent-ink:#FFB54C; --accent-soft:#50391B; --accent-08:rgba(255,149,0,.14); --accent-glow:rgba(255,149,0,.4); }
}

/* ---------- FloorBoard object palette (mirrors PAL in js/00-catalog.js) ---------- */
:root{
  --pal-slate:#7A8194; --pal-sky:#6FA3E8; --pal-coral:#E58A6F; --pal-olive:#9BA85A;
  --pal-sand:#E1B46A; --pal-lilac:#A98BE0; --pal-teal:#6DBBAF;
}