/* Hallmark · genre: editorial · theme: custom (vibe: "warm workshop, paper, terracotta, Vietnamese") · design-system: design.md
 * paper oklch(96.5% 0.012 78) · accent oklch(58% 0.115 47) terracotta · display Fraunces 600 · body Be Vietnam Pro
 * axes: light / classical-serif / warm
 * Shared by the static app (public/*.html) and the CI4 views (app/Views via Tailwind). Fonts: css/fonts.css.
 */
:root{
  /* ---------- colour ---------- */
  --color-paper:        oklch(96.5% 0.012 78);   /* app background */
  --color-paper-2:      oklch(98.6% 0.006 80);   /* panels, cards, inputs */
  --color-paper-3:      oklch(93.5% 0.016 76);   /* hover wash, subtle fills */
  --color-rule:         oklch(88.5% 0.018 76);   /* hairlines, borders */
  --color-rule-strong:  oklch(80% 0.022 72);
  --color-ink:          oklch(25% 0.012 60);     /* text */
  --color-ink-2:        oklch(40% 0.016 62);     /* secondary text */
  --color-muted:        oklch(52% 0.02 68);      /* captions (≥ 4.5:1 on paper) */
  --color-accent:       oklch(58% 0.115 47);     /* terracotta — selection, primary action */
  --color-accent-strong:oklch(50% 0.11 45);      /* hover / pressed / accent text */
  --color-accent-soft:  oklch(93% 0.035 55);     /* selected chips, soft fills */
  --color-accent-ink:   oklch(98.5% 0.008 80);   /* text on accent */
  --color-teal:         oklch(42% 0.05 200);     /* secondary data colour (charts, feng shui) */
  --color-good:         oklch(50% 0.11 150);
  --color-bad:          oklch(52% 0.16 28);
  --color-warn:         oklch(62% 0.12 75);
  --color-focus:        oklch(52% 0.14 250);     /* focus ring — distinct from selection */
  --color-scrim:        oklch(25% 0.02 60 / .38);
  --color-good-soft:    oklch(94% 0.04 150);     /* feng shui / verdict fills */
  --color-bad-soft:     oklch(94% 0.03 28);
  --color-warn-ink:     oklch(52% 0.1 75);
  --color-info:         oklch(52% 0.1 250);

  /* ---------- type ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-2xs: .6875rem;  /* 11 */
  --text-xs:  .75rem;    /* 12 */
  --text-sm:  .8125rem;  /* 13 — app UI default */
  --text-md:  .9375rem;  /* 15 */
  --text-lg:  1.125rem;  /* 18 */
  --text-xl:  1.5rem;    /* 24 */
  --text-2xl: 2rem;      /* 32 */
  --text-display-s: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --text-display:   clamp(2.75rem, 1.8rem + 4vw, 5rem);
  --leading-tight: 1.15;
  --leading-body: 1.55;

  /* ---------- space (4-pt) ---------- */
  --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-sm: 1rem;
  --space-md: 1.5rem;  --space-lg: 2rem;   --space-xl: 3rem;    --space-2xl: 4.5rem; --space-3xl: 7rem;

  /* ---------- shape & depth ---------- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --rule: 1px solid var(--color-rule);
  --shadow-1:   0 1px 2px oklch(25% 0.02 60 / .07);
  --shadow-sheet: 0 -10px 32px -10px oklch(25% 0.02 60 / .24);
  --shadow-pop: 0 12px 32px -8px oklch(25% 0.02 60 / .22), 0 2px 6px oklch(25% 0.02 60 / .08);

  /* ---------- motion ---------- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-short: 160ms; --dur-med: 240ms;

  /* ---------- app chrome ---------- */
  --bar-h: 52px;          /* desktop top bar */
  --tabbar-h: 60px;       /* mobile bottom bar */
  --status-h: 28px;       /* desktop status bar */
  --tap: 44px;            /* minimum touch target */
}
@media (prefers-reduced-motion: reduce){ :root{ --dur-short: 0ms; --dur-med: 120ms; } }

/* icons from img/icons.svg */
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.num{font-variant-numeric:tabular-nums}