/* ============================================================================
   177X HOUSE tokens
   Source of truth: 177X-ai/brand. Synced, never edited in a consumer repo.

   Two things live here:

   1. THE NAMING CONTRACT — the semantic role names (`--x-ground`, `--x-text`,
      `--x-accent`, …) that EVERY 177X product uses, whatever its palette. The
      names are polarity-neutral on purpose: "ground" is always a background and
      "text" is always a foreground, in a light product and a dark one alike.
      This is what stops the recurring bug where `--ink` meant the near-black
      background in one file and the near-white text in another.

   2. THE HOUSE PALETTE — 177X's own identity (177x.ai, and the products that
      adopt it: Strike, Rattle). A product with its own palette overrides the
      roles below in `products/<name>/tokens.css`; it does NOT redefine the role
      names, and it does not need the house colours.

   Load order in a consumer:
       fonts.css → tokens.css → [surface-light.css] → product.css

   This file carries the INVARIANT layer — the palette constants, the typefaces,
   the geometry — and imports surface-dark.css for the default role values, so
   loading it alone gives a complete dark product. A light product adds
   surface-light.css after it. See surface-dark.css for the auto-mode pattern.
   ========================================================================== */

@import url('./surface-dark.css?v=4602441');   /* role values for the default (dark) ground */

:root {
  /* --- House palette — 177X's own colours, by their brand names ---------- */
  --x-ink: #0B0B0D;          /* Ink — the house ground                       */
  --x-paper: #F3F2EA;        /* Paper — the house text                       */
  --x-voltage: #C8F23A;      /* Voltage — the signature accent               */
  --x-voltage-deep: #5A7308; /* Voltage Deep — same hue/sat, darkened until
                                it passes AA as TEXT on Paper (4.81:1).
                                Bright Voltage on Paper is 1.15:1 — unusable
                                for text. Use Deep only where the accent must
                                BE text; prefer Voltage as a fill with Ink on
                                it (15.19:1).                                */
  --x-graphite: #6E7178;     /* Graphite — labels, captions, eyebrows        */
  --x-cyan: #3AD9F2;         /* secondary hue — differentiator only          */
  --x-ember: #E0653F;        /* the one warm signal                          */

  /* --- Type --------------------------------------------------------------
         Only weights 400 and 500 ship as real files. See BRAND.md § Type.   */
  --x-font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI',
                    Roboto, sans-serif;
  --x-font-body: var(--x-font-display);
  --x-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'Cascadia Code',
                 Menlo, monospace;
  --x-weight-regular: 400;
  --x-weight-medium: 500;

  /* --- Geometry ---------------------------------------------------------- */
  --x-radius-sm: 8px;
  --x-radius: 12px;
  --x-radius-lg: 16px;

  /* --- Space, type scale, motion — THE FOURTH TIER -----------------------
     The canon used to define colour, two type stacks and three radii and stop,
     so 177x-site invented its own clamp() ramp and Coil its own density, and
     neither was recorded as drift. Sized from what the products already do. */
  --x-space-1: 2px;
  --x-space-2: 4px;
  --x-space-3: 8px;      /* table cell padding      */
  --x-space-4: 12px;     /* gap between controls    */
  --x-space-5: 16px;
  --x-space-6: 24px;     /* card padding            */
  --x-space-7: 32px;
  --x-space-8: 48px;     /* section separation      */

  /* One scale, two densities. Coil sets --x-text-body to --x-type-dense; every
     other product leaves it. That is the density switch products/coil chose
     when it took the house faces over system faces — a scale adjustment, not a
     second typeface. */
  --x-type-micro: 11px;
  --x-type-dense: 13.5px;
  --x-type-body: 15px;
  --x-type-section: 20px;
  --x-type-page: 30px;
  --x-type-display: 46px;
  --x-text-body: var(--x-type-body);

  /* Elevation. Default is flat and the dark surface keeps it flat — these two
     are for light products only (see surface-dark.css). */
  --x-elevation-flat: none;
  --x-elevation-raised: 0 1px 2px rgba(11, 11, 13, .06), 0 2px 8px rgba(11, 11, 13, .04);
  --x-elevation-overlay: 0 4px 12px rgba(11, 11, 13, .10), 0 16px 40px rgba(11, 11, 13, .10);

  /* Motion: three durations, one curve. A tool estimators read all day should
     not animate more than it has to. */
  --x-motion-1: 120ms;   /* hover, focus            */
  --x-motion-2: 200ms;   /* disclosure, tab change  */
  --x-motion-3: 320ms;   /* overlay entry           */
  --x-ease: cubic-bezier(.2, .8, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --x-motion-1: 0ms;
    --x-motion-2: 0ms;
    --x-motion-3: 0ms;
  }
}