/* ==========================================================================
   Design tokens: the single source of every visual value in the app.
   Colours use light-dark(LIGHT, DARK): each token is defined once and the
   active theme is chosen by `color-scheme` (system by default, or forced via
   <html data-theme="light|dark"> from Settings).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../vendor/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* ---- Accent (overridden at runtime from Settings) -------------------- */
  --accent: #2F5BEA;
  --accent-contrast: #FFFFFF;                     /* text on accent fills; set by JS */
  /* Accent as text: computed per accent in settings.js to stay ≥ 4.5:1 (these are the defaults for #2F5BEA). */
  --accent-text-light: #2D57E1;
  --accent-text-dark: #6586EF;
  --accent-text: light-dark(var(--accent-text-light), var(--accent-text-dark));
  --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);

  /* ---- Neutrals ---------------------------------------------------------- */
  --bg:           light-dark(#F7F7F8, #0E0E10);
  --surface:      light-dark(#FFFFFF, #18181B);
  --surface-2:    light-dark(#F2F2F4, #212126);
  --border:       light-dark(#E4E4E7, #2C2C31);
  --border-strong:light-dark(#D4D4D8, #3F3F46);
  --text:         light-dark(#18181B, #F4F4F5);
  --text-muted:   light-dark(#63636B, #A1A1AA);   /* AA on bg and surface in both themes */
  --focus-ring:   var(--accent-text);
  --scrim:        light-dark(rgb(24 24 27 / 0.32), rgb(0 0 0 / 0.56));

  /* ---- Status: reserved for over / under budget only -------------------- */
  --negative:     light-dark(#DC2626, #F87171);
  --positive:     light-dark(#15803D, #4ADE80);
  --negative-soft:color-mix(in oklab, var(--negative) 12%, transparent);
  --positive-soft:color-mix(in oklab, var(--positive) 12%, transparent);

  /* ---- Category palette (defaults offered when creating a category) ----
     Validated with the dataviz palette checker in BOTH themes (surfaces
     #FFFFFF / #18181B) in this order: adjacent colour-blind ΔE ≥ 11, normal
     vision ΔE ≥ 16, chroma ≥ 0.10, ≥ 3:1 contrast. No reds or greens, so
     those keep their over/under-budget meaning. Order matters: it is the
     stacking order of the default categories. */
  --cat-1:   #B964DD;  /* orchid */
  --cat-2:   #1AA598;  /* teal */
  --cat-3:   #A29015;  /* mustard */
  --cat-4:   #A74F21;  /* brown */
  --cat-5:   #5096CE;  /* blue */
  --cat-6:   #8A48B3;  /* purple */
  --cat-7:   #E25295;  /* pink */
  --cat-8:   #7B6C01;  /* olive */
  --cat-9:   #0975A2;  /* deep cyan */
  --cat-10:  #7C7BFF;  /* periwinkle */

  /* ---- Typography -------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-display: 2.25rem;/* 36: the one big number per card */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --tracking-tight: -0.02em;

  /* ---- Spacing: 8px grid (--s-half for hairline gaps only) -------------- */
  --s-half: 4px;
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;

  /* ---- Shape & depth ----------------------------------------------------- */
  --radius: 12px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-1: 0 1px 2px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.3));
  --shadow-overlay: 0 8px 24px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5));

  /* ---- Layout ------------------------------------------------------------ */
  --touch: 44px;          /* minimum touch target */
  --tabbar-h: 56px;
  --sidebar-w: 232px;
  --content-max: 960px;

  /* ---- Motion ------------------------------------------------------------ */
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}