/* Vesper colour tokens — a screen is a stack of flat colour bands.
   Each band pairs exactly one background with one ink; components never
   name a colour of their own, they inherit whichever band they land in. */
:root{
  /* base values — heather, the leading scheme */
  --vsp-plum:#76455C;
  --vsp-plum-deep:#7A3F55;
  --vsp-rose:#F5D6DC;
  --vsp-petal:#FFE0E4;
  --vsp-haze:#A87A90;
  --vsp-slate:#5A4E5E;
  --vsp-ink:#2F2429;
  --vsp-deep:#1A1016;
  --vsp-alarm:#F25F77;

  /* semantic — the three bands a screen is built from, darkest at the bottom.
     :root is heather; the alternates live below as [data-theme] blocks. */
  --band-1-bg: var(--vsp-plum);
  --band-1-fg: var(--vsp-petal);
  --band-1-quiet: rgba(255,224,228,.8);
  --band-2-bg: var(--vsp-rose);
  --band-2-fg: var(--vsp-ink);
  --band-2-quiet: var(--vsp-plum-deep);
  --band-3-bg: var(--vsp-deep);
  --band-3-fg: var(--vsp-petal);
  --band-3-quiet: #C4A3B0;

  /* the only state colour in the system, and only ever a plane — never text,
     a dot, or a badge. a failed band is repainted wholesale with this pair. */
  --band-failed-bg: var(--vsp-alarm);
  --band-failed-fg: var(--vsp-deep);
  --band-failed-quiet: rgba(26,16,22,.85);

  /* accents — planes and marks only, never text */
  --accent-haze: var(--vsp-haze);
  --accent-slate: var(--vsp-slate);
}

/* ---- schemes ----------------------------------------------------------------
   Four palettes over one structure. Every scheme keeps the same three-band
   order and the same alarm pair, so nothing about layout, motion, or component
   code changes between them. Set data-theme on any ancestor — usually <html> —
   to retheme everything under it. Components only ever read --band-* and
   --accent-*.

   The one hard rule a scheme must satisfy: band 1 and band 2 carry inks of
   OPPOSITE polarity. A title crossing the seam is one word painted in two
   inks, so pale-over-dark above and dark-over-pale below is what makes the
   split legible. In twilight band 2 is a mid-tone plane rather than a pale
   one — light enough to take dark ink, dark enough to stay night.

   light: heather (default), wisteria   ·   dark: twilight, girliepop

   The scheme names are reference labels for this design system only. They are
   never product vocabulary: no app surfaces them in UI copy, settings, or a
   theme picker, and no application code branches on one. An app reads the
   band and accent tokens, and someone sets data-theme once at the root.     */

[data-theme="heather"]{
  --band-1-bg: var(--vsp-plum);
  --band-1-fg: var(--vsp-petal);
  --band-1-quiet: rgba(255,224,228,.8);
  --band-2-bg: var(--vsp-rose);
  --band-2-fg: var(--vsp-ink);
  --band-2-quiet: var(--vsp-plum-deep);
  --band-3-bg: var(--vsp-deep);
  --band-3-fg: var(--vsp-petal);
  --band-3-quiet: #C4A3B0;
  --band-failed-bg: var(--vsp-alarm);
  --band-failed-fg: var(--vsp-deep);
  --band-failed-quiet: rgba(26,16,22,.85);
  --accent-haze: var(--vsp-haze);
  --accent-slate: var(--vsp-slate);
}

/* light — heather rotated cool: periwinkle-violet over pale lilac.
   the light bridge to twilight. */
[data-theme="wisteria"]{
  --band-1-bg:#5A5088;
  --band-1-fg:#EDE6FF;
  --band-1-quiet: rgba(237,230,255,.8);
  --band-2-bg:#E2DCF2;
  --band-2-fg:#262135;
  --band-2-quiet:#4E447A;
  --band-3-bg:#16132A;
  --band-3-fg:#EDE6FF;
  --band-3-quiet:#A9A2C4;
  --band-failed-bg: var(--vsp-alarm);
  --band-failed-fg:#16132A;
  --band-failed-quiet: rgba(22,19,42,.85);
  --accent-haze:#8E85BF;
  --accent-slate:#4E5266;
}

/* dark — indigo night with a mid periwinkle plane that takes dark ink,
   so a title crossing the seam still breaks in two */
[data-theme="twilight"]{
  --band-1-bg:#2B2C45;
  --band-1-fg:#DEDBF3;
  --band-1-quiet: rgba(222,219,243,.8);
  --band-2-bg:#8287AF;
  --band-2-fg:#14142A;
  --band-2-quiet:#33345C;
  --band-3-bg:#100F20;
  --band-3-fg:#DEDBF3;
  --band-3-quiet:#8E8BAF;
  --band-failed-bg: var(--vsp-alarm);
  --band-failed-fg:#100F20;
  --band-failed-quiet: rgba(16,15,32,.85);
  --accent-haze:#7B78A3;
  --accent-slate:#4A5566;
}

/* dark — the lesbian flag read as bands: the warm half becomes ink, the pink
   and magenta half becomes planes. band 2 is the flag's pink, light enough to
   take dark ink, so the title still splits at the seam. */
[data-theme="girliepop"]{
  --band-1-bg:#4A0B33;
  --band-1-fg:#FF9A56;
  --band-1-quiet: rgba(255,255,255,.8);
  --band-2-bg:#D162A4;
  --band-2-fg:#2A0016;
  --band-2-quiet:#6B0A44;
  --band-3-bg:#1E0011;
  --band-3-fg:#FF9A56;
  --band-3-quiet:#C77FA0;
  --band-failed-bg: var(--vsp-alarm);
  --band-failed-fg:#1E0011;
  --band-failed-quiet: rgba(30,0,17,.85);
  --accent-haze:#B55690;
  --accent-slate:#EF7627;
}
/* Vesper type tokens. Three families, three jobs — never substitute one for another.
   Every face must be licensable for embedding in a shipped commercial app. */
:root{
  --font-display: "Audiowide", system-ui, sans-serif;  /* lowercase always, the seam titles and every big number — one weight only */
  --font-body: "Exo 2", system-ui, -apple-system, sans-serif; /* anything a person may read aloud */
  --font-mono: "Doto", "Exo 2", monospace;              /* decorative identifiers only — the dot matrix makes several digits near-identical, so it never carries a value */

  --display-tracking: .05em;
  --display-leading: 1;
  --display-weight: 400;                                /* Audiowide ships one weight — never fake a bolder one */

  --text-body-size: 15px;
  --text-body-weight: 350;
  --text-body-leading: 1.5;

  --text-label-size: 11px;
  --text-label-weight: 600;
  --text-label-tracking: .16em;

  --text-code-size: 11px;
  --text-code-tracking: .26em;
  --text-code-weight: 700;                              /* Doto's dots only meet from 700; at 600 they stand apart on every ground */
}
/* Vesper spacing & shape tokens. Hard left gutter, zero radius, everything else fluid. */
:root{
  --space-gutter: clamp(28px, 5vw, 72px);
  --space-bar-y: clamp(26px, 4vh, 44px);
  --space-bar-size: clamp(15px, 1.5vw, 19px);
  --space-row-y: clamp(9px, 1.5vh, 16px);
  --space-opt-y: clamp(10px, 1.5vh, 17px);
  --space-row-gap: clamp(10px, 1.4vw, 20px);
  --space-stack-gap: clamp(30px, 5.5vw, 84px);
  --space-hover-shift: 16px;

  --radius-none: 0px; /* radius is zero everywhere in this system, with no exceptions */
}
/* Vesper motion tokens. One easing curve, used everywhere.
   Never put a CSS transition on a property derived from a value you are
   already animating (e.g. a pane offset derived from the seam) — drive it
   frame by frame instead, or it will chase the seam by up to 3/4s.
   Native platforms: the closed form 1-(1-t)^3.2 stands in for the bezier. */
:root{
  --ease-out: cubic-bezier(.1,.9,.2,1); /* @kind other */

  --dur-seam: 760ms; /* @kind other */
  --dur-rail: 420ms; /* @kind other */
  --dur-hover: 160ms; /* @kind other */
  --dur-opacity: 300ms; /* @kind other */
  --dur-cascade: 460ms; /* @kind other */
  --stagger-cascade: 60ms; /* @kind other */
  --stagger-letter: 36ms;
  --dur-letter: 500ms;
  --dur-countup: 780ms; /* @kind other */
  --dur-flash: 620ms; /* @kind other */
}