/* Design tokens (docs/design_system.md): three designed seeds, everything
   else derived. The only file where raw color values may appear. */
:root {
  /* Seeds */
  --paper:  oklch(98% 0.006 90);
  --ink:    oklch(24% 0.015 85);
  --accent: oklch(52% 0.09 178);

  /* Derived neutrals */
  /* 55 % sat too close to the paper: secondary text read as murky rather
     than quiet, and .meta carries most of what an Inbox item says. */
  --muted:   color-mix(in oklch, var(--ink) 70%, var(--paper));
  --border:  color-mix(in oklch, var(--ink) 12%, var(--paper));
  --surface: color-mix(in oklch, var(--ink) 3%, var(--paper));
  --muted-faint:  color-mix(in oklch, var(--muted) 55%, var(--paper));
  --card-surface: color-mix(in oklch, var(--surface) 40%, var(--paper));
  --border-danger: color-mix(in oklch, var(--danger) 40%, var(--border));

  /* Derived accent states */
  --accent-hover: oklch(from var(--accent) calc(l - 0.06) c h);
  --accent-tint:  oklch(from var(--accent) 94% calc(c * 0.35) h);
  --accent-ink:   oklch(98% 0.01 178);

  /* Semantic: accent hue rotated, tone kept */
  --ok:     oklch(from var(--accent) l c 150);
  --warn:   oklch(from var(--accent) l c 65);
  --danger: oklch(from var(--accent) l calc(c * 1.4) 28);
  --warn-tint:   oklch(from var(--warn) 94% calc(c * 0.4) h);
  --danger-tint: oklch(from var(--danger) 95% calc(c * 0.35) h);

  /* Kind tints: a hue washed into the paper — what kind of paper an
     item came from, never what state it is in. Mixed into --paper
     rather than pinned to a lightness, so each recomputes with the
     scheme (the state tints above pin theirs, which is why they only
     ever cover a badge). The hues avoid 28/65/150, which carry meaning.
     2.5 % is the wash: enough to tell two items apart in a column,
     little enough that the words on it stay the loudest thing in the
     card. --tint-plain is its neutral sibling, for an item with no kind
     of its own — lighter than --surface, which was built for panels. */
  --tint-receipt:   color-mix(in oklch, oklch(from var(--accent) l c 178) 2.5%, var(--paper));
  --tint-purchase:  color-mix(in oklch, oklch(from var(--accent) l c 265) 2.5%, var(--paper));
  --tint-sales:     color-mix(in oklch, oklch(from var(--accent) l c 320) 2.5%, var(--paper));
  --tint-statement: color-mix(in oklch, oklch(from var(--accent) l c 215) 2.5%, var(--paper));
  /* The same hues at the accent's own tone, for words on those washes. */
  --tint-plain: color-mix(in oklch, var(--ink) 1.5%, var(--paper));
  --ink-receipt:   oklch(from var(--accent) l c 178);
  --ink-purchase:  oklch(from var(--accent) l c 265);
  --ink-sales:     oklch(from var(--accent) l c 320);
  --ink-statement: oklch(from var(--accent) l c 215);

  /* Scales */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  /* The sticky header's height: anything an anchor scrolls to must clear it */
  --header-block-size: 3.5rem;
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 16px;
  --shadow-1: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent);
  --hairline-shadow: 0 1px 0 var(--border);

  /* Type scale (body stays 1rem; headings fluid) */
  --text-0: 0.75rem;
  --text-1: 0.85rem;
  --text-2: 0.9rem;
  --text-3: 0.95rem;
  --text-4: 1.1rem;
  --text-5: 1.2rem;
  --text-h2: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  --text-h1: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(22% 0.012 85);
    --ink:   oklch(93% 0.008 85);
  }
}