/* tokens.css — design tokens for both themes. Change colours, radii and spacing here, not in components.
   Primary:   black and white (surfaces and text from Preline “Tokens”: Default / Default Dark).
   Secondary: brand gold #FDBB2D and ocean blue #2270C3 — used sparingly (highlights, progress lines, brand effects).
   Dark is the default theme (set on <html data-theme="dark">); light applies with data-theme="light". */
:root {
  /* light — Preline Default */
  color-scheme: light;
  --bg: #FFFFFF;            /* Background          ← White */
  --layer: #F5F5F5;         /* Background 1        ← Neutral/100 */
  --line: #E5E5E5;          /* Layer Border        ← Neutral/200 */
  --line-strong: #D4D4D4;   /* Border 2            ← Neutral/300 */
  --hairline: rgb(10 10 10 / .08);
  --fg: #262626; --fg-strong: #0A0A0A; --fg-soft: #525252; --fg-muted: #6E6E6E; --fg-dim: #8F8F8F;   /* muted text keeps ≥ 4.5:1 on white and on --layer */
  --gold: #FDBB2D;          /* brand secondary: gold */
  --ocean: #2270C3;         /* brand secondary: ocean blue */
  --accent: var(--gold);    /* fills that carry black text (highlight, counts, badges) */
  --line-grad: linear-gradient(90deg, var(--ocean), var(--gold));   /* progress lines only */
  --hero-stage: #DEDEDE;
  --roll-on-surface: #1A5EA6; --roll-on-fill: var(--gold);   /* button roll colours: ocean (text-safe) on white, gold on black fills */
  --stage-muted: #5E5E5E;   /* muted text on the grey stage */
  --footer-rule: var(--hero-stage);   /* light: no seam between the grey banner and the grey footer */
  --grad-text: linear-gradient(180deg, #E39A0E 0%, #2270C3 100%);   /* small gradient text: deeper gold on white */
  --spill-a: rgba(34, 112, 195, .2); --spill-b: rgba(253, 187, 45, .24);    /* light mode: the home hero sits on a grey stage so the gold render reads */
  --sel-bg: var(--ocean); --sel-fg: #FFFFFF;
  --ink: #0A0A0A;
  --focus: #0A0A0A;
  --danger: #DC2626; --danger-text: #B91C1C;
  --glass: rgb(255 255 255 / .74); --tray-bg: rgb(255 255 255 / .86); --input-bg: #FFFFFF; --tint: rgb(10 10 10 / .05);
  --disc-a: #F4F4F4; --disc-b: #E2E2E2; --scrim: 255 255 255; --mark-filter: invert(1);
  --r-pill: 9999px; --r-control: 8px; --r-card: 12px; --r-stage: 20px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* moves: things travelling from A to B */
  --ease-in: cubic-bezier(.55, 0, 1, .45);       /* exits: things leaving */
  --header-h: 4.25rem;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* dark — Preline Default (Dark): follows the device, or the visitor’s choice */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --hero-stage: transparent; --footer-rule: var(--line); --roll-on-surface: var(--gold); --roll-on-fill: #1A5EA6; --stage-muted: #8F8F8F; --sel-bg: var(--gold); --sel-fg: #0A0A0A;
  --grad-text: linear-gradient(180deg, #FDBB2D 0%, #4C93DE 100%); --spill-a: rgba(34, 112, 195, .34); --spill-b: rgba(253, 187, 45, .2);
  color-scheme: dark;
  --bg: #0A0A0A; --layer: #171717; --line: #262626; --line-strong: #404040; --hairline: rgb(255 255 255 / .09);
  --fg: #EDEDED; --fg-strong: #FFFFFF; --fg-soft: #BDBDBD; --fg-muted: #8F8F8F; --fg-dim: #6B6B6B;
  --focus: #FFFFFF; --danger: #EF4444; --danger-text: #F87171;
  --glass: rgb(10 10 10 / .7); --tray-bg: rgb(23 23 23 / .82); --input-bg: #0E0E0E; --tint: rgb(255 255 255 / .07);
  --disc-a: #2B2B2B; --disc-b: #121212; --scrim: 10 10 10; --mark-filter: none;
} }
:root[data-theme="dark"] {
  --hero-stage: transparent; --footer-rule: var(--line); --roll-on-surface: var(--gold); --roll-on-fill: #1A5EA6; --stage-muted: #8F8F8F; --sel-bg: var(--gold); --sel-fg: #0A0A0A;
  --grad-text: linear-gradient(180deg, #FDBB2D 0%, #4C93DE 100%); --spill-a: rgba(34, 112, 195, .34); --spill-b: rgba(253, 187, 45, .2);
  color-scheme: dark;
  --bg: #0A0A0A; --layer: #171717; --line: #262626; --line-strong: #404040; --hairline: rgb(255 255 255 / .09);
  --fg: #EDEDED; --fg-strong: #FFFFFF; --fg-soft: #BDBDBD; --fg-muted: #8F8F8F; --fg-dim: #6B6B6B;
  --focus: #FFFFFF; --danger: #EF4444; --danger-text: #F87171;
  --glass: rgb(10 10 10 / .7); --tray-bg: rgb(23 23 23 / .82); --input-bg: #0E0E0E; --tint: rgb(255 255 255 / .07);
  --disc-a: #2B2B2B; --disc-b: #121212; --scrim: 10 10 10; --mark-filter: none;
}
/* the switch spreads out from the toggle */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal .8s cubic-bezier(.7, 0, .2, 1); }
@keyframes theme-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0%)); } to { clip-path: circle(160vmax at var(--vt-x, 50%) var(--vt-y, 0%)); } }