/* Hallmark · design system: design.md · genre: modern-minimal · designed-as-app
 * Every colour, font, space, radius and easing the app uses. style.css refers
 * to these by name and never writes a raw value of its own; see design.md for
 * the rules they encode.
 */

/* Geist, shipped inside the app (fonts/, OFL licence alongside) so no screen
   ever fetches a font from anywhere: the app makes no third-party calls. One
   variable file carries every weight. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour: dark first. Paper, ink, and meaning. ---- */
  /* A deep blue-black ground. Green used to be the whole interface, which
     made the app read as one colour; now the foundation is neutral so light
     means something wherever it appears. */
  --bg: oklch(14% 0.014 265);
  --bg-elevated: oklch(17.4% 0.016 265);
  --surface: oklch(19.6% 0.017 265);
  --surface-alt: oklch(23.4% 0.018 265);
  --surface-hi: oklch(27.2% 0.019 265);
  --text: oklch(96.6% 0.004 255);
  --text-muted: oklch(68% 0.016 258);
  --text-dim: oklch(61% 0.018 258);
  /* A divider has to be visible in both themes, not only in the light one:
     at 27.6% it measured 1.20 against a card, which reads as no line at all
     on a phone in daylight. */
  --border: oklch(30% 0.017 265);
  --border-hi: oklch(37% 0.022 265);
  /* The one pixel of light along the top of a raised surface. */
  --edge-lum: oklch(100% 0 0 / 0.07);

  /* What a surface does when you touch it, when it is chosen, and when it is
     not available. Defined in both themes, so a pressed row looks pressed
     whichever one you are in. */
  --surface-press: oklch(24% 0.018 265);
  --surface-selected: oklch(26% 0.05 232);
  --text-disabled: oklch(48% 0.014 258);

  /* Cyan is interaction: the main action, where you are, focus, and the line
     a chart draws. Not a mood - the colour of "this responds". */
  --accent: oklch(80% 0.128 222);
  --accent-ink: oklch(16% 0.03 235);
  --accent-soft: oklch(26% 0.05 232);
  --accent-line: oklch(42% 0.09 228);
  /* The second voice in a comparison - the flexible half of a budget, the
     second bar in a ranking. Never an action. */
  --violet: oklch(68% 0.148 295);
  --violet-soft: oklch(26% 0.055 295);
  /* Kawach's own green now says one thing: money in good standing - what is
     free, what is saved, a goal on track. Never chrome, never a border. */
  --emerald: oklch(72% 0.13 162);

  /* Meaning, never decoration: money in, money out, careful. */
  --in: oklch(83.2% 0.156 158);
  --out: oklch(73.2% 0.165 28);
  --warn: oklch(83.7% 0.164 84);

  /* Category chips: one colour per kind of spending (js/category-style.js),
     and eight more for categories you make yourself. */
  --cat-uncategorized: oklch(61.8% 0.026 165);
  --cat-food: oklch(75.3% 0.155 42);
  --cat-groceries: oklch(80% 0.182 152);
  --cat-transport: oklch(75.4% 0.139 233);
  --cat-bills: oklch(83.7% 0.164 84);
  --cat-home: oklch(70.9% 0.159 294);
  --cat-shopping: oklch(72.5% 0.175 350);
  --cat-fun: oklch(72.2% 0.177 306);
  --cat-health: oklch(77.3% 0.153 163);
  --cat-income: oklch(90.2% 0.191 122);
  --cat-transfer: oklch(71.1% 0.03 165);
  --cat-invest: oklch(79.7% 0.134 212);
  --cat-learning: oklch(71.4% 0.143 255);
  --cat-gifts: oklch(71.9% 0.169 13);
  --cat-none: oklch(55.4% 0.035 165);
  --cat-1: oklch(76.9% 0.165 70);
  --cat-2: oklch(60.6% 0.219 293);
  --cat-3: oklch(71.5% 0.126 215);
  --cat-4: oklch(65.6% 0.212 354);
  --cat-5: oklch(76.8% 0.204 131);
  --cat-6: oklch(64.5% 0.215 16);
  --cat-7: oklch(70.4% 0.123 183);
  --cat-8: oklch(62.7% 0.233 304);

  --chip-bg: var(--surface-alt);
  --scrim: oklch(0% 0 0 / 0.55);

  /* Depth, in three steps and nothing more: a card sits, a hero lifts, a
     sheet floats. Each is a soft shadow plus a one-pixel edge catching the
     light at the top - the way a real card looks, not a glow. */
  --edge: oklch(100% 0 0 / 0.06);
  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.28), 0 4px 16px oklch(0% 0 0 / 0.22);
  --shadow: 0 1px 2px oklch(0% 0 0 / 0.4), 0 8px 28px oklch(0% 0 0 / 0.35);
  --shadow-lift: 0 10px 34px oklch(0% 0 0 / 0.5);

  /* ---- Type: one family, Geist, set tight for figures. ---- */
  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: var(--font-display);
  --tracking-display: -0.025em;

  /* ---- Space: a 4-point scale. Nothing is spaced by a raw value. ---- */
  --space-4xs: 0.125rem; /*  2px: hairline gaps only */
  --space-3xs: 0.25rem; /*  4px */
  --space-2xs: 0.5rem; /*  8px */
  --space-xs: 0.75rem; /* 12px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.25rem; /* 20px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */

  /* ---- Shape ---- */
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 11px;
  --radius-pill: 999px;

  /* ---- Motion: three easings, no springs on controls. ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 480ms;
}

/* The light theme keeps the same bones: same contrast, same weight, just
   inverted. It is not a softer or quieter version of the app. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: oklch(97.2% 0.004 255);
    --bg-elevated: oklch(100% 0 0);
    --surface: oklch(100% 0 0);
    --surface-alt: oklch(95.6% 0.005 255);
    --surface-hi: oklch(93% 0.007 255);
    --text: oklch(17.5% 0.014 262);
    --text-muted: oklch(48% 0.016 258);
    /* Dim, but still readable: it carries the small labels. */
    --text-dim: oklch(52% 0.016 258);
    /* Same reasoning as the dark theme: a divider must be seen. */
    --border: oklch(88.5% 0.007 255);
    --border-hi: oklch(83% 0.011 255);
    /* Paper cannot catch a white highlight; its edge is a faint shadow. */
    --edge-lum: oklch(17.5% 0.014 262 / 0.05);

    --surface-press: oklch(96% 0.005 255);
    --surface-selected: oklch(95% 0.035 232);
    --text-disabled: oklch(65% 0.014 258);

    --accent: oklch(52% 0.13 235);
    --accent-ink: oklch(100% 0 0);
    --accent-soft: oklch(95% 0.035 232);
    --accent-line: oklch(86% 0.07 230);
    --emerald: oklch(50% 0.11 162);
    --violet: oklch(50% 0.17 295);
    --violet-soft: oklch(95% 0.03 295);

    /* Measured on the paper: 3.78, 4.17 and 4.06 before this. Same colours,
       darker, so a figure reads as well on the paper as on a card. */
    --in: oklch(53% 0.13 159);
    --out: oklch(56.9% 0.19 31);
    --warn: oklch(55.4% 0.125 69);

    /* Category colours are chosen against black. On white the same colours
       measured between 1.29 and 2.72, so the light theme keeps each hue and
       darkens it: every one now clears 4.5 on a card and on the paper. */
    --cat-uncategorized: oklch(54.4% 0.026 165);
    --cat-food: oklch(56.3% 0.155 42);
    --cat-groceries: oklch(51.7% 0.182 152);
    --cat-transport: oklch(53.3% 0.139 233);
    --cat-bills: oklch(54.9% 0.164 84);
    --cat-home: oklch(56.2% 0.159 294);
    --cat-shopping: oklch(57% 0.175 350);
    --cat-fun: oklch(56.7% 0.177 306);
    --cat-health: oklch(51.7% 0.153 163);
    --cat-income: oklch(53.4% 0.191 122);
    --cat-transfer: oklch(54.3% 0.03 165);
    --cat-invest: oklch(52.1% 0.134 212);
    --cat-learning: oklch(54.9% 0.143 255);
    --cat-gifts: oklch(56.9% 0.169 13);
    --cat-none: oklch(54.3% 0.035 165);
    --cat-1: oklch(55.4% 0.165 70);
    --cat-2: oklch(57.1% 0.219 293);
    --cat-3: oklch(52.5% 0.126 215);
    --cat-4: oklch(57.5% 0.212 354);
    --cat-5: oklch(53% 0.204 131);
    --cat-6: oklch(57.4% 0.215 16);
    --cat-7: oklch(52.2% 0.123 183);
    --cat-8: oklch(57.6% 0.233 304);

    --scrim: oklch(16.8% 0.007 258 / 0.45);
    /* On paper the light comes from above too, but a white card cannot catch
       a white highlight: the edge is a faint shadow instead. */
    --edge: oklch(16.8% 0.007 258 / 0.04);
    --shadow-card: 0 1px 2px oklch(16.8% 0.007 258 / 0.04), 0 3px 12px oklch(16.8% 0.007 258 / 0.05);
    --shadow: 0 1px 2px oklch(16.8% 0.007 258 / 0.05), 0 6px 20px oklch(16.8% 0.007 258 / 0.06);
    --shadow-lift: 0 10px 30px oklch(16.8% 0.007 258 / 0.12);
  }
}