/* scinxz.dev / Aurora house style tokens. Source of truth: docs/house-style.md.
   Import this first on every page: <link rel="stylesheet" href="/tokens.css"> */
:root {
  /* Ink: backgrounds, darkest to lightest */
  --ink-0: #07080f;   /* app chrome, rail, login background */
  --ink-1: #0c0e1a;   /* main canvas */
  --ink-2: #12152a;   /* cards, inputs on canvas */
  --ink-3: #1a1e36;   /* hover, active nav, icon tiles */
  --line: #252a45;    /* borders, dividers */
  --line-2: #343a5c;  /* secondary button border, input border */

  /* Text */
  --text: #eef0f8;    /* primary */
  --text-2: #c4c8dc;  /* body */
  --text-3: #9299b8;  /* muted, captions (min contrast on ink-1) */

  /* Working colour: sub-headers, stats, counts, icons, tags */
  --lime: #c4f542;

  /* Action */
  --primary: #6b57ff;       /* primary buttons (white text) */
  --primary-soft: #a99bff;  /* links, ".dev" in the wordmark */
  --ai-text: #b9afff;       /* Adria labels */
  --ai-bg: #141733;         /* inside Adria cards */

  /* Status */
  --ok: #3fcf8e;
  --info: #3dd6ff;
  --warn: #ffae3d;
  --danger: #ff5c7a;

  /* Signature: the aurora gradient. Only for marks, Adria card edges and focus rings. */
  --aurora-cyan: #3dd6ff;
  --aurora-violet: #7b5cff;
  --aurora-magenta: #ff4fb8;
  --aurora-amber: #ffae3d;
  --aurora: linear-gradient(120deg, #3dd6ff 0%, #7b5cff 36%, #ff4fb8 70%, #ffae3d 100%);

  /* Type */
  --font: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  /* Shape and space (4-pt grid) */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --tap: 44px; /* minimum touch target */
}

/* Shared helpers */
.label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.stat { font-weight: 600; letter-spacing: -0.03em; color: var(--lime); }
.kbd { font-family: var(--mono); font-size: 12px; color: var(--text-2); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; }
.ai-card { border-radius: var(--r-lg); padding: 1px; background: var(--aurora); }
.ai-card > .inner { background: var(--ai-bg); border-radius: calc(var(--r-lg) - 1px); padding: 23px; }
:focus-visible { outline: 2px solid var(--aurora-violet); outline-offset: 2px; }