/* juris design tokens: the single source for the citizen surface.
   Selene-mapped light theme, per docs/DESIGN.md. Light only for launch: the
   dark theme from the direction-2026.html mockup was extrapolated, not
   measured (Selene ships no dark mode), and is deferred rather than shipped
   here. The back office keeps its own light/dark toggle on this same
   palette; see backoffice/web/src/styles/tokens.css. */

:root{
  /* Mauritius flag palette: the anchor, never themed as decoration. */
  --flag-red:#EA2839; --flag-blue:#1A206D; --flag-yellow:#FFD500; --flag-green:#00A551;

  /* surfaces: warm parchment canvas, white cards, two alternating bands. */
  --canvas:#F5EFE6; --panel:#FFFFFF; --panel-2:#E6DED5; --panel-3:#E3DAD1;
  /* --faint was #858585, 3.2:1 on the canvas: every caption, placeholder and
     footnote failed WCAG AA. #6B6B6B is 4.7:1 on the canvas, 5.3:1 on white. */
  --ink:#242424; --muted:#5E5E5E; --faint:#6B6B6B;
  --hair: color-mix(in srgb, var(--ink) 10%, transparent);

  /* accent: terracotta, kept scarce (eyebrow text, small tags, active
     states), never the primary CTA fill. Secondary olive-sage for stat
     numerals, icon rails, and the highlighted pricing tier. */
  --accent:#D1762C; --accent-soft: rgba(209,118,44,.14);
  /* The accent is a FILL colour. As text it is 3.3:1 on white and 2.9:1 on the
     canvas, so every accent-coloured link, eyebrow and list number failed AA.
     Text uses the ink variant (6.2:1 on white, 5.3:1 on the accent tint); the
     hue family is the same, so the page reads the same. */
  --accent-ink:#94500F;
  --accent-2:#5A5E33; --accent-2-dark:#3F4224; --accent-2-soft: rgba(90,94,51,.12);

  /* the actual button fill is ink, not the accent: Selene's own rule, and it
     keeps the accent scarce enough to stay legible against the flag colours. */
  --primary-fill:#242424; --primary-fg:#F5EFE6;

  /* citation status triad: fixed regardless of accent, never themed as
     decoration. Byte-identical to the back office's triad so a lawyer moving
     between surfaces reads the same colours the same way. */
  --verified:#00A551; --crossref:#8a8f9e; --unverified:#EA2839; --doc-cite:#1A206D;
  /* Text-safe inks of the same triad. The flag green on its own 12% tint was
     2.8:1, which made the "verified" chip, the product's core trust signal,
     its least legible element. Fills, dots and borders keep the flag hues;
     words use these (all 5.1:1 or better on their tints). */
  --verified-ink:#00753A; --unverified-ink:#B81C2C; --crossref-ink:#5F6473;

  /* focus: one visible ring for every interactive element. */
  --focus:#1A206D;

  /* elevation: low-alpha, colour-neutral, multi-layer shadows (Selene's
     ambient-occlusion technique), not a hue-tinted shadow or a hard offset. */
  --shadow-1: 0 1px 2px rgba(36,30,20,.06);
  --shadow-2: 0 1px 2px rgba(36,30,20,.05), 0 8px 24px -8px rgba(36,30,20,.08), 0 20px 40px -8px rgba(36,30,20,.10);

  /* type: Spectral serif for every headline, Inter for everything else, both
     self-hosted from web/app/fonts/ (no third-party font CDN). */
  --font-display:'Spectral',serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* type scale: five text steps, 12px floor, 16px body. The surface had grown
     to eighteen sizes, most of them fractional (11.5, 12.5, 13.5...) and the
     commonest body size was 12.5px. Headings use the display clamps in
     styles.css; everything else is one of these. 16px is also the size below
     which iOS Safari zooms the page when an input takes focus. */
  --fs-xs:12px;   /* labels, badges, eyebrows: never smaller */
  --fs-sm:14px;   /* meta, captions, secondary text, button labels */
  --fs-md:16px;   /* body, answers, inputs */
  --fs-lg:18px;   /* card titles, ledes */
  --fs-xl:20px;   /* section titles inside a page */

  /* tap floor: every standalone control is at least this tall and wide. 44px
     is the iOS HIG minimum and the WCAG 2.5.5 target size; measured by the
     qa/ harness on every device row. Inline citation chips grow their hit box
     with a pseudo-element instead, so a line of prose keeps its rhythm. */
  --tap:44px;

  /* radius scale, measured from selene.framer.ai. */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* motion: opacity plus 8-16px Y, one easing, kept tiny and easy to kill. */
  --ease: cubic-bezier(.2,.8,.2,1);
}