/* Mythos design tokens (docs/DESIGN.md section 1). Every other stylesheet uses only these names.
   Base colours are fixed by CLAUDE.md; everything below them is a tint or shade of a base colour. */
:root {
  /* base — same as CLAUDE.md */
  --emerald: #0E4B3B; --gold: #D4AF37; --pearl: #F6F5EF; --white: #FFFFFF;
  --smoky: #6B6560; --jade: #0B7A5E; --ruby: #B3263E; --amethyst: #7B4FA3;

  /* tints made from the base colours (DESIGN.md) */
  --emerald-900: #0A3A2E;   /* hero gradient end */
  --emerald-50:  #EEF3EF;   /* table header, hover */
  --gold-50:     #FBF6E3;   /* selected card fill */
  --gold-600:    #B8952A;   /* gold hover, eyebrow */
  --jade-50:     #E6F3EE;
  --ruby-50:     #F8E9EC;
  --amethyst-50: #F1EBF7;
  --line:        #E4E1D8;   /* borders, row lines */

  /* dashboard tints and shades (owner, 2 Nov 2026): lighter or darker steps of the same base colours */
  --emerald-100: #D6E7DD;   /* light tile */
  --gold-200:    #EED98F;   /* light gold tile end */
  --jade-300:    #7FD1B5;   /* money in on emerald */
  --ruby-300:    #F09AA9;   /* money out on emerald */
  --ruby-700:    #8A1D30;   /* ruby tile end */
  --amethyst-700:#5C3A7D;   /* amethyst tile end */
  --smoky-700:   #4A4541;   /* smoky tile end */
  --grid-fine:   rgba(255, 255, 255, .05);   /* blueprint lines on the dashboard hero */
  --grid-major:  rgba(255, 255, 255, .09);

  /* text on emerald (sidebar, top bar, hero, summary panel) — white mixed with emerald */
  --on-emerald:        #FFFFFF;
  --on-emerald-strong: #E8F0EC;  /* sidebar links */
  --on-emerald-soft:   #CFE0D9;  /* hero and summary lines */
  --on-emerald-muted:  #9CB8AD;  /* sidebar group titles, top bar date */
  --on-emerald-line:   rgba(255, 255, 255, .25);
  --on-emerald-hover:  rgba(255, 255, 255, .08);
  /* states made from the base colours */
  --row-hover:   rgba(238, 243, 239, .55);  /* emerald-50 at 55% */
  --deleted-50:  #EFEDE8;                   /* smoky on pearl */
  --skeleton:    #ECEAE3;                   /* line, a little darker */
  --scrim:       rgba(10, 58, 46, .45);     /* emerald-900 at 45% */
  --focus-ring:  rgba(212, 175, 55, .45);   /* gold at 45% */
  --focus-soft:  rgba(212, 175, 55, .25);   /* gold at 25% */

  --radius-s: 8px; --radius-m: 12px; --radius-l: 16px;
  --shadow-card: 0 1px 2px rgba(14, 75, 59, .06), 0 4px 16px rgba(14, 75, 59, .05);
  --shadow-pop:  0 8px 28px rgba(14, 75, 59, .18);

  --font: system-ui, "Segoe UI", Roboto, sans-serif;
  --text: 15px; --text-s: 14px;   /* nothing smaller than 14px */
  --gap: 24px; --gap-phone: 16px;
  --tap: 44px;                     /* smallest tap target */
  --side-w: 236px;
}