/*
 * HigherSelf Systems - design tokens
 * ==================================
 * Single source of truth for colour, type, spacing, radii and borders.
 * Load BEFORE components.css. Everything in components.css reads from here.
 *
 * How to use:
 *   - Never hard-code a colour, font size or space value in components.css
 *     or in page markup. Use the custom properties below.
 *   - Dark mode is a token swap only (@media prefers-color-scheme: dark at
 *     the bottom). Components must not contain colour media queries of
 *     their own.
 *   - All foreground/background pairs below have been measured for WCAG AA.
 *     Measured ratios are recorded in OUT-site-design.md. If you change a
 *     value, re-measure before shipping.
 *
 * Naming:
 *   --color-*        colour values
 *   --font-*         font families
 *   --text-*         font sizes (rem, assuming the 16px browser default)
 *   --leading-*      line heights
 *   --space-*        spacing scale (4px base)
 *   --radius-*       border radii
 *   --width-*        layout measures
 */

:root {

  /* ------------------------------------------------------------------
   * Colour - light scheme (default)
   * Neutral, warm-grey "document" register. One accent: a deep ink blue.
   * Severity hues are deliberately muted; alarm is the failure mode.
   * ------------------------------------------------------------------ */

  --color-bg:           #ffffff;  /* page */
  --color-surface:      #f5f5f2;  /* panels, cards, table headers */
  --color-surface-2:    #f0f0ec;  /* code blocks, inset areas */
  --color-ink:          #1b1b1a;  /* primary text */
  --color-ink-2:        #57574f;  /* secondary text, captions (7.3:1 on bg) */
  --color-border:       #c9c9c2;  /* hairlines, card borders */
  --color-border-strong:#8f8f86;  /* emphasis borders, table rules */

  --color-accent:       #1a49c4;  /* links, focus ring, primary actions */
  --color-accent-hover: #12379b;  /* link hover */
  --color-on-accent:    #ffffff;  /* text on solid accent/ink buttons */

  /* Severity axis: hue only. Always paired with a written word, so no
   * meaning is carried by colour alone. Each "text" colour passes AA on
   * its matching "tint" background. */
  --color-sev-critical-text: #a11a12;
  --color-sev-critical-tint: #fae9e8;
  --color-sev-high-text:     #8a4a00;
  --color-sev-high-tint:     #f8efdf;
  --color-sev-medium-text:   #6d5c00;
  --color-sev-medium-tint:   #f6f2d8;
  --color-sev-low-text:      #44546a;
  --color-sev-low-tint:      #eceff4;

  /* Confidence axis: drawn from neutral ink, never from severity hues.
   * Solidity encodes the axis: confirmed = solid, strong = tint+border,
   * indicative = dashed outline. Words are always present as well. */
  --color-conf-solid-bg:   var(--color-ink);
  --color-conf-solid-text: var(--color-bg);

  --color-code-comment: #6a6a61;  /* comments/prompts inside code (4.8:1) */

  /* ------------------------------------------------------------------
   * Type
   * System stacks only. No web fonts, no third-party requests. Mono is
   * used for labels, eyebrows, badges and code: it is the cheapest way
   * to read "engineering document" rather than "wellness brand".
   * ------------------------------------------------------------------ */

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Sizes. Pixel equivalents assume an unscaled 16px root. */
  --text-xs:   0.75rem;    /* 12px  badges, eyebrows, captions */
  --text-sm:   0.8125rem;  /* 13px  secondary text, table cells */
  --text-md:   1.0625rem;  /* 17px  body */
  --text-lg:   1.25rem;    /* 20px  lede, card titles */
  --text-xl:   1.5rem;     /* 24px  h3 */
  --text-2xl:  2rem;       /* 32px  h2 */
  --text-3xl:  3rem;       /* 48px  h1 */

  --leading-body:    1.6;
  --leading-heading: 1.2;
  --leading-caption: 1.45;
  --leading-code:    1.55;

  --tracking-label: 0.08em;  /* letter-spacing for uppercase mono labels */

  /* ------------------------------------------------------------------
   * Spacing - 4px base, roughly doubling rhythm
   * ------------------------------------------------------------------ */

  --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  section breaks on tall pages */

  /* ------------------------------------------------------------------
   * Radii and borders
   * Near-square corners read as a document, not a consumer app.
   * ------------------------------------------------------------------ */

  --radius-sm:   3px;    /* badges, chips */
  --radius-md:   6px;    /* cards, code blocks, buttons */
  --radius-pill: 999px;  /* only for status dots */

  --border-hairline: 1px solid var(--color-border);
  --border-strong:   1px solid var(--color-border-strong);
  --border-accent:   3px solid;  /* left rules; set colour per component */

  /* ------------------------------------------------------------------
   * Layout measures
   * Prose is capped for readability; the page caps wider so reports and
   * tables can breathe. At 320px everything is fluid; nothing has a
   * fixed pixel width.
   * ------------------------------------------------------------------ */

  --width-prose: 42rem;   /* ~670px  long-form reading measure */
  --width-wide:  56rem;   /* ~900px  summary tables, 3-up card grids */
  --width-rail:  22rem;   /* ~350px  apparatus column beside the prose */
  --width-page:  68rem;   /* ~1090px page container */
  --width-min:   20rem;   /* 320px floor, for documentation only */

  /* Focus ring: 3:1 against both schemes' backgrounds. */
  --focus-ring: 2px solid var(--color-accent);
  --focus-offset: 2px;
}

/* --------------------------------------------------------------------
 * Colour - dark scheme
 * Same hues, value-inverted. Severity tints become near-black fields
 * with lightened severity text. Nothing else in the system changes.
 * ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #141413;
    --color-surface:      #1d1d1b;
    --color-surface-2:    #1a1a18;
    --color-ink:          #e9e7e2;
    --color-ink-2:        #a8a69d;
    --color-border:       #3a3a35;
    --color-border-strong:#6e6e64;  /* 3.6:1 on bg; #5c5c54 measured 2.73:1, under the 3:1 floor */

    --color-accent:       #9db4f5;
    --color-accent-hover: #c0cff9;
    --color-on-accent:    #141413;

    --color-sev-critical-text: #f1948c;
    --color-sev-critical-tint: #33100e;
    --color-sev-high-text:     #e8b06a;
    --color-sev-high-tint:     #2c1d0a;
    --color-sev-medium-text:   #d8cc7a;
    --color-sev-medium-tint:   #2a2610;
    --color-sev-low-text:      #a3b6cc;
    --color-sev-low-tint:      #1a2129;

    --color-code-comment: #8f8d84;
  }
}