@charset "UTF-8";

/* ==========================================================================
   CIBHER — design tokens

   Single source of truth for the brand palette and scales. Linked directly by
   every page, never @imported, so a legal instrument depends on exactly one
   1.5 KB file of custom properties and cannot be broken by a change to the
   marketing stylesheets.

   This file replaces the two :root blocks that used to be duplicated in
   modern.css and legal.css. That duplication was deliberate — legal pages have
   to stay readable on their own — but it had already drifted: legal.css was
   missing --c-surface-3 and carried --measure that modern.css lacked. The
   resilience intent is preserved instead by giving the legibility-critical
   declarations in legal.css literal fallbacks, e.g. var(--c-bg, #03120c), so
   the documents survive this file failing to load.

   Contains ONLY custom properties, color-scheme, and the reduced-motion base.
   No layout, no components. Keep it that way.
   ========================================================================== */

:root {
  /* ---- Colour -----------------------------------------------------------
     Tonal green scale — depth comes from layering, not transparency.
     Anchored on the logo: --c-surface-2 is sampled straight off the mark's
     plate (#053827, hsl 160). The rest of the family sits on that same hue. */
  --c-bg: #03120c;
  --c-surface-1: #051d14;
  --c-surface-2: #053827;
  --c-surface-3: #0a4e36;
  --c-accent: #20ac7d;
  --c-accent-2: #2ad795;

  --c-line: rgba(255, 255, 255, .08);
  --c-line-strong: rgba(255, 255, 255, .16);
  --c-text: #eef2ec;
  --c-text-dim: rgba(238, 242, 236, .66);

  /* Error text. #ff6b6b is 6.96:1 on --c-bg and 6.35:1 on --c-surface-1, both
     past AA. The shop previously used #b91c1c on black, which is 2.9:1 — the
     error message was the least readable text on the purchase page. */
  /* Foreground for anything sitting ON --c-accent (buttons, badges, pills).
     6.53:1 on --c-accent. Was repeated as a literal in four stylesheets. */
  --c-on-accent: #04140e;

  --c-danger: #ff6b6b;
  --c-danger-surface: rgba(255, 107, 107, .10);

  /* ---- Spacing — 4px base, only the steps actually in use --------------- */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 9rem;

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-card: 1.25rem;
  --r-pill: 999px;

  /* ---- Shadow — collapses six ad-hoc values ----------------------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .30);
  --sh-2: 0 12px 32px rgba(0, 0, 0, .28);
  --sh-3: 0 24px 64px rgba(0, 0, 0, .40);
  --sh-accent: 0 12px 32px rgba(32, 172, 125, .16);

  /* ---- Layers — every layer named, no bare integers in any stylesheet --- */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 10;
  --z-navbar: 50;
  --z-overlay: 100;
  --z-skiplink: 200;

  /* ---- Motion ----------------------------------------------------------- */
  --d-fast: 120ms;
  --d-base: 180ms;
  --d-slow: 320ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- Type scale -------------------------------------------------------
     Semantic names for the scale that previously lived as hardcoded clamp()
     values on Mobirise's .display-N classes. Those classes are NOT renamed —
     they appear in hundreds of places — they are re-expressed in these tokens
     at identical computed values, so the generated pages render unchanged.
     .display-3 and .display-6 do not exist in the Mobirise scale; --t-h2 and
     --t-body-lg are new steps used only by hand-written surfaces. */
  --t-display: clamp(2.75rem, 7vw, 5.5rem);   /* .display-1 */
  --t-h1: clamp(2rem, 4.5vw, 3.5rem);         /* .display-2 */
  --t-h2: clamp(1.5rem, 3vw, 2.25rem);        /* new */
  --t-h3: clamp(1.25rem, 2vw, 1.6rem);        /* .display-5 */
  --t-body-lg: clamp(1.0625rem, 1.4vw, 1.25rem); /* new */
  --t-body: clamp(1rem, 1.2vw, 1.125rem);     /* .display-7 */
  --t-ui: .95rem;                             /* .display-4 */
  --t-meta: .85rem;

  /* Prose measure — legal instruments. Layout-specific, but it belongs with
     the scale rather than orphaned in one stylesheet. */
  --measure: 68ch;
}

/* The site is dark-only by design. Declaring it stops the UA rendering form
   controls, scrollbars and spinners in light styling against a dark page. */
html {
  color-scheme: dark;
}