/* Quill — Design tokens (Direction D · House — locked)
 * Cream paper. Quiet deep teal. Sage for wins. Amber for nudges.
 * Red is reserved for genuine alarm only.
 *
 * Source: design-system/d-d-house.jsx
 */

:root {
  /* ── Surfaces & ink ─────────────────────────────────────────── */
  --paper:        #fbf6ea;  /* page background */
  --paper-2:      #ffffff;  /* card surface */
  --paper-3:      #f1e9d4;  /* sunken / inputs / agent chat bubble */
  --line:         #e6dcc1;  /* card & button borders */
  --line-soft:    #efe6cd;  /* subtle dividers between rows */
  --ink:          #1a160e;  /* primary text */
  --ink-2:        #5f5644;  /* secondary text */
  --ink-3:        #9a8e70;  /* tertiary / hints / secondary-btn border */

  /* ── Accent (Quill's voice — teal) ──────────────────────────── */
  --accent:        #1f6c6e;  /* hairlines, sparklines, pill outlines */
  --accent-soft:   #d4e5e4;  /* tinted patch — pill fills */
  --accent-deep:   #0f4a4d;  /* accent text on soft fill */

  /* Saturated accent SURFACE — full-card backgrounds (StoryCard,
   * MetricCard accent variant, accent buttons, send pill, Quill avatar).
   * In light this matches --accent; in dark it diverges to a deeper,
   * lower-luminance teal so a full card of color doesn't fatigue.
   */
  --accent-surface:     #1f6c6e;
  --accent-surface-fg:  #ffffff;

  /* ── Semantic ───────────────────────────────────────────────── */
  --positive:      #557e4d;  /* sage — wins, streaks */
  --positive-soft: #d8e5cb;
  --warn:          #b07a1f;  /* amber — soft nudges */
  --warn-soft:     #f0dba6;
  --alarm:         #b4422c;  /* red — true emergencies only */
  --alarm-soft:    #f1d3c8;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --font-ui:      'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (px / line-height · weight) */
  --type-display-xl: 60px;  /* / 0.92 · 500 · -0.035em */
  --type-display-lg: 36px;  /* / 1.05 · 500 · -0.025em */
  --type-heading:    22px;  /* / 1.25 · 500 · -0.02em  */
  --type-body:       14px;  /* / 1.6  · 400            */
  --type-body-sm:    12px;  /* / 1.55 · 400            */
  --type-label:      12px;  /* / 1.4  · 600 · UPPER · 1.4ls */
  --type-mono:       13px;  /* / 1.4  · 500            */

  /* ── Spacing (4pt grid) ─────────────────────────────────────── */
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* ── Radius ─────────────────────────────────────────────────── */
  --r-6:    6px;
  --r-12:   12px;
  --r-20:   20px;   /* card default */
  --r-28:   28px;   /* hero card */
  --r-full: 9999px; /* pills, buttons, inputs */

  /* ── Elevation ──────────────────────────────────────────────── */
  --elev-flat: none;
  --elev-rest: 0 2px 4px rgba(40,20,0,0.04), 0 12px 28px -8px rgba(40,20,0,0.10);
  --elev-lift: 0 4px 10px rgba(40,20,0,0.06), 0 24px 48px -8px rgba(40,20,0,0.18);
}

/* ── Dark theme (evening) ─────────────────────────────────────────────
 *
 * Revision notes (vs. v1): the original dark tokens were too subtle —
 * cards and buttons faded into the page and status pills lost their
 * shape. This pass tightens contrast across the board:
 *
 *   - paper-2 (card surface) lifted so cards visibly lift off paper.
 *   - paper-3 (chip / input / agent bubble) lifted further so it
 *     reads as clearly interactive against the card.
 *   - line bumped so card and button borders carry real edge contrast.
 *   - soft semantic tones brightened so status pill fills are visible.
 *   - accent-surface diverges from accent: cards use a deeper teal with
 *     cream text (~9:1 contrast, WCAG AAA, comfortable for long reads),
 *     while the bright `accent` hue is reserved for hairlines, sparkline
 *     strokes, and pill outlines where it pops without fatiguing.
 *
 * Component-level fixes that pair with these tokens are in d-d-house.jsx:
 *   - Pills get a colored hairline in their fg hue on dark.
 *   - Input shows a 1px --line border at rest (not just on focus).
 *   - Agent chat bubble shows a 1px --line border so it holds shape.
 *   - Secondary button uses --ink-3 as border (reads on both themes).
 */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #0d0b06;  /* deeper page bg, so cards lift */
    --paper-2:      #2e2614;  /* card surface */
    --paper-3:      #544532;  /* chip / input / agent bubble — clear lift */
    --line:         #6a5a3c;
    --line-soft:    #3f3520;
    --ink:          #faf2dc;
    --ink-2:        #cdbf9a;
    --ink-3:        #94886a;

    --accent:       #6fc9c3;  /* bright teal — for thin marks only */
    --accent-soft:  #244f4c;
    --accent-deep:  #a3e1dc;

    --accent-surface:    #1a5b5d;  /* deeper teal — for saturated bg */
    --accent-surface-fg: #f4ecd6;

    --positive:      #a8d093;
    --positive-soft: #3b5b2e;
    --warn:          #e5b35a;
    --warn-soft:     #604120;
    --alarm:         #ec8a70;
    --alarm-soft:    #6a3326;
  }
}