/* Kilwater design tokens. "Golden hour": the page is one afternoon that turns into evening.
   Surfaces: day -> gold -> dusk. Amber is light (glow, sun, primary action), never paint.
   Dusk is the dark theme of the system; it is applied by band, not by operating-system preference. */


:root{
  /* ---- primitive ramps (OKLCH-derived; step 400 / 950 hold the approved seeds) ---- */
  /* amber: seed #E59A2F on 400 (oklch 0.744 0.145 70.6) */
  --amber-50:#fbf6f0; --amber-100:#f7ebde; --amber-200:#efdac3; --amber-300:#e5c29a; --amber-400:#e59a2f;
  --amber-500:#c5821e; --amber-600:#9c6612; --amber-700:#87570e; --amber-800:#6e4609; --amber-900:#593806; --amber-950:#3a2303;
  /* glow stops used by the sun and the horizon line */
  --glow-100:#ffe9bd; --glow-200:#ffe3a8; --glow-300:#ffd58a; --glow-400:#f7be5c;
  /* gold: the golden-hour surface (#F6D9B0 = oklch 0.899 0.063 76) */
  --gold-100:#fbeed8; --gold-200:#f6d9b0; --gold-300:#ecc48c;
  /* night: dusk indigo; 950 is the approved dusk surface, 980 the body ink */
  --night-50:#f6f7f9; --night-100:#ebecf2; --night-200:#dbdde7; --night-300:#c5c8d8; --night-400:#a7acc6;
  --night-500:#8b90ae; --night-600:#6b7190; --night-700:#5c617e; --night-800:#4a4e65; --night-900:#3b3f50;
  --night-950:#2b2f4a; --night-980:#1d2230;
  /* day: warm cloth neutrals, seed #F4F1EC on 100 */
  --day-50:#fbfbfa; --day-100:#f4f1ec; --day-200:#dfdedc; --day-300:#cac9c6; --day-400:#b0aeaa;
  --day-500:#94928e; --day-600:#75736e; --day-700:#65635f; --day-800:#514f4c; --day-900:#413f3d; --day-950:#2a2927;

  /* ---- semantic status colours: -text on day and gold, -dusk on dusk; always with icon and word ---- */
  --success:#0e7120; --on-success:#ffffff; --success-text:#0e7120; --success-dusk:#6cc470;
  --warning:#855900; --on-warning:#ffffff; --warning-text:#855900; --warning-dusk:#d6a31f;
  --error:#aa3d36;   --on-error:#ffffff;   --error-text:#aa3d36;   --error-dusk:#fa8579;
  --info:#0064ad;    --on-info:#ffffff;    --info-text:#0064ad;    --info-dusk:#5db1ff;

  /* ---- surfaces: the time of day ---- */
  --surface-day:var(--day-100); --surface-gold:var(--gold-200); --surface-dusk:var(--night-950);
  --surface-white:#ffffff;

  /* ---- roles, day theme (default) ---- */
  --color-background:var(--surface-day);
  --color-surface:var(--surface-white);
  --color-surface-2:var(--day-200);
  --color-text:var(--night-980);
  --color-text-muted:#4b5163;            /* 7.0:1 on day, 5.8:1 on gold */
  --color-text-accent:var(--amber-700);  /* amber as text on day (5.5:1); on gold use --amber-800 */
  --color-border:var(--day-600);         /* component edges, 4.2:1 on day, 4.8:1 on white */
  --color-border-subtle:var(--day-300);  /* decorative dividers only */
  --color-rule:var(--night-980);         /* horizon rules */
  --color-primary:var(--amber-400);      /* primary action fill */
  --color-on-primary:var(--night-980);   /* 6.8:1 */
  --color-primary-hover:var(--glow-400); /* the sun rises: lighter, ink stays 9.4:1 */
  --color-primary-active:#c97f14;        /* ink on it 4.9:1 */
  --color-accent:var(--amber-400);
  --color-on-accent:var(--night-980);
  --color-focus-ring:var(--night-980);   /* 15.9:1 on white; amber would be 2.3:1 */
  --color-link:var(--night-980);         /* links are bordered buttons, see components */
  --shadow-color:230deg 30% 14%;

  /* ---- type ---- */
  --font-heading:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:var(--font-heading);
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  /* light only at display size (>= 48 px); body is 400 or heavier */
  --step--2:clamp(.8125rem,.6rem + .14vw,1rem);   /* 13 px caps labels, +0.06em tracking */
  --step--1:clamp(1rem,.7rem + .21vw,1.1875rem);   /* 16 px at 1440 */
  --step-0:clamp(1.125rem,.8rem + .357vw,1.5rem);   /* 18 px at 1440, 22 px at 2560: body */
  --step-1:clamp(1.3125rem,.95rem + .4vw,1.8rem);   /* 21 px lead */
  --step-2:1.625rem;     /* 26 px, sub-heads */
  --step-3:clamp(2.125rem,1.5rem + .65vw,3rem);   /* 34 px price and counters */
  --step-4:clamp(3rem,4.4vw,6.5rem);      /* 48-104, card title */
  --step-5:clamp(3rem,4.6vw,7rem);      /* 48-112, section title */
  --step-6:clamp(3.125rem,5.6vw,7.5rem);  /* 50-120, page title */
  --lh-tight:1.04; --lh-heading:1.06; --lh-snug:1.2; --lh-body:1.6; --lh-lead:1.55;
  --tracking-display:-0.025em; --tracking-caps:0.06em;
  --measure:60ch;

  /* ---- spacing: 4 px base ---- */
  --space-0:0; --space-half:0.125rem; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem; --space-40:10rem;

  /* ---- layout: bands run edge to edge, content sits in one container ---- */
  --gutter:max(16px,1.5vw);
  --container:min(2300px,94vw,calc(100vw - 32px));
  --band-pad-y:var(--space-24);
  --horizon-y:calc(38vw - 150px);

  /* ---- shape: one soft personality, pills for every control ---- */
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-full:999px;
  --border-1:1px; --border-2:1.5px; --border-3:3px;   /* hairline / control / focus */

  /* ---- depth: scale 0-5, one light from above, tinted with dusk; glow = amber light on the focal element ---- */
  --shadow-0:none;
  --shadow-1:0 1px 2px hsl(var(--shadow-color) / .08),0 2px 6px hsl(var(--shadow-color) / .10);
  --shadow-2:0 4px 14px hsl(var(--shadow-color) / .14);
  --shadow-3:0 6px 24px hsl(var(--shadow-color) / .30);
  --shadow-4:0 20px 50px hsl(var(--shadow-color) / .30);
  --shadow-5:0 30px 80px hsl(var(--shadow-color) / .40);
  --glow-1:0 6px 26px rgb(229 154 47 / .5);
  --glow-2:0 8px 44px rgb(229 154 47 / .85);
  --glow-horizon:0 0 26px 4px rgb(255 201 110 / .75);

  /* ---- opacity: one scale; text is never semi-transparent ---- */
  --o-hover:.08; --o-pressed:.12; --o-disabled:.38; --o-disabled-fill:.12;
  --o-reflection-key:.45; --o-reflection-heading:.3; --o-reflection-button:.22;
  --scrim-1:.5; --scrim-2:.72;   /* hero sky overlay, #12162C */

  /* ---- motion: transform and opacity only; one spring ---- */
  --dur-1:.25s; --dur-2:.35s; --dur-3:.4s; --dur-4:.6s; --dur-ripple:.9s;
  --ease:ease; --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- media: one ratio per set, one corner radius ---- */
  --logo-h:clamp(62px,3.3vw,100px);
  --ratio-panorama:2.5/1; --ratio-band:2.3/1;
}

/* dusk: the dark theme, set on a band (data-theme="dusk"); the preview page toggles it as "dark" on :root */
[data-theme="dusk"],:root[data-theme="dark"]{
  --color-background:var(--surface-dusk);
  --color-surface:var(--night-900);
  --color-surface-2:var(--night-800);
  --color-text:var(--day-100);
  --color-text-muted:var(--gold-200);    /* 9.6:1 on dusk */
  --color-text-accent:var(--amber-400);  /* 5.6:1 on dusk */
  --color-border:var(--gold-200);
  --color-border-subtle:rgb(246 217 176 / .35);
  --color-rule:var(--gold-200);
  --color-focus-ring:var(--amber-400);
  --color-link:var(--gold-200);
  --success:var(--success-dusk); --on-success:#111111; --success-text:var(--success-dusk);
  --warning:var(--warning-dusk); --on-warning:#111111; --warning-text:var(--warning-dusk);
  --error:var(--error-dusk);     --on-error:#111111;   --error-text:var(--error-dusk);
  --info:var(--info-dusk);       --on-info:#111111;    --info-text:var(--info-dusk);
  color-scheme:dark;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-1:0s;--dur-2:0s;--dur-3:0s;--dur-4:0s;--dur-ripple:0s}
}