/* ============================================================================
   SecondWave — Design tokens
   ----------------------------------------------------------------------------
   The single source of truth for every colour, size, space and duration in the
   product. Nothing else in the codebase may hard-code a hex value, a pixel
   font-size, or a raw spacing number. If you need a value that isn't here, add
   it here first and then use it.

   WHY THE DESIGN LOOKS LIKE THIS (read before changing anything):

   - Pure black ground with white type is the brand, carried over from the
     existing SecondWave identity. It is not negotiable.
   - The palette is fully monochrome — black ground, white ink, no accent
     colour. There was a single orange accent (--signal) through most of this
     build; it was removed 2026-09 after review called it generic/AI-ish, and
     no replacement hue was introduced. If you think this needs an accent,
     that is a decision for Joel, not something to reintroduce quietly.
   - Buttons and badges are fully-rounded pills. Cards, inputs and images are
     perfectly square. That deliberate pairing is the system's signature; do not
     soften cards with a border-radius, and do not square off a button.
   - Because the palette has no colour to spend on meaning, state is carried by
     brightness (the ink ramp below), shape, an icon, or a word — never colour
     alone. See --condition-* usage and the .fit-- classes in components.css.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     COLOUR — ground and ink
     The scale runs from pure black up through greys to pure white. Numbers are
     "how light is it", so --ink-100 is the brightest ink and --ground-100 the
     darkest ground. Never introduce a grey outside this ramp.
     ----------------------------------------------------------------------- */
  --ground-100: #000000;  /* page background — the brand black */
  --ground-90:  #0a0a0a;  /* raised surfaces: cards, sheets, menus */
  --ground-80:  #141414;  /* inputs, wells, anything recessed */
  --ground-70:  #1f1f1f;  /* hover state on a raised surface */
  --ground-60:  #2e2e2e;  /* borders and hairlines */
  --ground-50:  #454545;  /* disabled surfaces */

  --ink-100: #ffffff;     /* primary text and the wordmark */
  --ink-80:  #c7c7c7;     /* secondary text: metadata, captions */
  --ink-60:  #8f8f8f;     /* tertiary text: hints, placeholders, timestamps */
  --ink-40:  #5c5c5c;     /* disabled text — do not use for real content */

  /* --------------------------------------------------------------------------
     COLOUR — semantic roles
     Aliases so components never reach for a raw ramp value. Change the meaning
     of a role here and it updates everywhere.
     ----------------------------------------------------------------------- */
  --bg-page:      var(--ground-100);
  --bg-raised:    var(--ground-90);
  --bg-recessed:  var(--ground-80);
  --bg-hover:     var(--ground-70);
  --border:       var(--ground-60);
  --border-strong: var(--ink-60);

  --text-primary:   var(--ink-100);
  --text-secondary: var(--ink-80);
  --text-muted:     var(--ink-60);
  --text-disabled:  var(--ink-40);

  --focus-ring: var(--ink-100);

  /* --------------------------------------------------------------------------
     TYPE
     One family does everything, the way a neo-grotesque is supposed to. Size,
     weight and letter-spacing carry the hierarchy — never a second typeface.
     Archivo is a variable font; self-host it (see PLAN.md M1).
     ----------------------------------------------------------------------- */
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Display sizes scale with the viewport. The clamp() middle value is the
     fluid term; the outer two are the floor and ceiling so text never becomes
     unreadably small on a phone or absurd on a 4K monitor. */
  --text-display:  clamp(2.75rem, 9vw,   6rem);      /* page-owning headline */
  --text-h1:       clamp(2rem,   6vw,    3.5rem);
  --text-h2:       clamp(1.5rem, 4vw,    2.25rem);
  --text-h3:       clamp(1.25rem, 2.5vw, 1.5rem);
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-sm:       0.875rem;
  --text-xs:       0.75rem;   /* smallest permitted — badges and labels only */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Big type gets tighter tracking, small type gets looser. This is the single
     most important rule for matching the SecondWave look. */
  --track-display: -0.04em;
  --track-heading: -0.02em;
  --track-body:     0em;
  --track-label:    0.06em;   /* uppercase micro-labels only */

  --leading-tight: 1.05;   /* display and h1 */
  --leading-snug:  1.25;   /* h2, h3, card titles */
  --leading-normal: 1.5;   /* body copy */
  --leading-loose: 1.7;    /* long-form reading */

  /* --------------------------------------------------------------------------
     SPACE — 4px base grid. Use these, never arbitrary numbers.
     ----------------------------------------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* --------------------------------------------------------------------------
     SHAPE
     Pills for actions, squares for content. See the header note.
     ----------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-pill: 999px;
  --radius-round: 50%;

  --hairline: 1px;
  --rule: 1px solid var(--border);

  /* --------------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --page-max: 1440px;
  --prose-max: 68ch;      /* readable line length for long copy */
  --gutter: var(--space-4);
  --gutter-lg: var(--space-7);

  /* Minimum interactive size. 44px is the accessible floor; we use 48 because
     users are outdoors, often with cold or wet hands. */
  --touch-min: 48px;

  /* --------------------------------------------------------------------------
     MOTION
     Motion is functional here: it shows where something came from. Nothing
     decorative, nothing longer than 400ms.
     ----------------------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --------------------------------------------------------------------------
     ELEVATION
     On a black ground, shadows are nearly invisible, so depth is carried by
     the ground ramp plus a hairline. These exist for overlays only.
     ----------------------------------------------------------------------- */
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.72);

  --z-sticky: 10;
  --z-nav: 20;
  --z-sheet: 30;
  --z-modal: 40;
  --z-toast: 50;
}

/* ----------------------------------------------------------------------------
   Reduced motion. Respect it properly — remove motion, keep state changes.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

/* ----------------------------------------------------------------------------
   FUTURE: light theme.
   The brand is committed to black and v1 ships dark only. Users are frequently
   outdoors in bright daylight, so a light theme is a real future requirement,
   not a nice-to-have. It is deliberately a token swap and nothing more — if you
   ever find yourself writing component CSS to support light mode, the tokens
   above are wrong and should be fixed instead.

   [data-theme="light"] {
     --bg-page: #ffffff;  --bg-raised: #f5f5f5;  ... etc
   }
   -------------------------------------------------------------------------- */