/*
 * Design-system tokens — docs/20-design/03-design-system.md, §1.
 *
 * The file deliberately mirrors the document almost verbatim. This is not
 * copy-paste for its own sake: a divergence between the tokens and the document
 * means the "status color" will start living its own life, and that is exactly
 * what the design system forbids.
 *
 * A RULE THAT MUST NOT BE BROKEN (03-design-system §1.1).
 *   --passed, --failed, --flaky are used ONLY for the status of a run or a test.
 *   Not in buttons, not in charts, not in decorative elements, not in navigation
 *   icons. There is exactly one exception: the primary "Connect repository"
 *   button is filled with --passed, because it literally means "start keeping
 *   things green".
 *
 *   Why this is critical: if green appears as decoration, the green status will
 *   stop reading as a signal — and in a product where the whole point is "green
 *   means good", that destroys the product.
 */

:root {
  /* Surfaces — dark theme by default */
  --bg:              #0B0F0D;
  --surface:         #141A16;
  --surface-hover:   #1A211C;
  --border:          #232C26;
  --border-strong:   #33403A;

  /* Text */
  --text:            #E8EDE9;
  --text-muted:      #93A398;
  --text-inverse:    #0B0F0D;

  /* Statuses — ONLY for run statuses */
  --passed:          #3FBF6F;
  --failed:          #E5533D;
  --flaky:           #E0A93B;
  --unknown:         #6B7A70;

  /* Utility */
  --info:            #4A90D9;
  --focus:           #3FBF6F;

  /* Typography */
  --font-ui:   'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: 44px;
  --fs-h1:      32px;
  --fs-h2:      24px;
  --fs-h3:      18px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-micro:   12px;

  --lh-tight:   1.15;
  --lh-normal:  1.5;
  --lh-mono:    1.6;

  /* Space and shape */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop:  0 8px 24px rgba(0, 0, 0, .5);

  --maxw-content: 1100px;
  --maxw-text:    720px;

  /* Motion */
  --t-fast: 120ms ease-out;
  --t-base: 200ms ease-out;
  --t-slow: 320ms ease-out;
}