/* FRAMA Assist – design tokens.
   This is the ONLY file that may contain a colour literal. Every other stylesheet
   uses var(--token) or color-mix() on a token, so both themes stay in one place.
   A test (tests/test_style_tokens.py) fails the build if a hex colour appears in
   another app/static/*.css file.

   Load order of the stylesheets:
     tokens.css -> app.css (base) -> pages.css (page layouts)
     -> product-ui.css (components, PWA, polish) -> layout.css (side-menu preference)

   Scales: spacing 4/8/12/16/24/32/48, radius 10/16/24 (+ pill), type 11/12/13/15/20/2xl.
   Nothing smaller than --text-xs (11px) is allowed anywhere in the product. */

:root {
  color-scheme: light;

  /* ---- spacing ------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- radii -------------------------------------------------------- */
  --radius-sm: 10px;   /* inputs, table chips, list rows */
  --radius-md: 16px;   /* buttons, alerts, controls inside a dialog */
  --radius-lg: 24px;   /* cards, tiles, dialog, app frame */
  --radius-pill: 999px;/* badges, nav pills, round icon buttons */
  --radius-card: var(--radius-lg);     /* legacy alias, kept for existing rules */
  --radius-control: var(--radius-md);  /* legacy alias, kept for existing rules */

  /* ---- type --------------------------------------------------------- */
  --text-xs: 11px;                      /* readable minimum: labels only */
  --text-sm: 12px;                      /* helper text, table-sub */
  --text-md: 13px;                      /* table cells, list rows */
  --text-base: 14px;                    /* body */
  --text-lg: 15px;                      /* h3, tile title */
  --text-xl: 20px;                      /* h2, card headings */
  --text-2xl: clamp(26px, 2.2vw, 34px); /* h1, the number on a tile */

  /* ---- surfaces and ink --------------------------------------------- */
  --bg: #f3f3f1;
  --surface: #fff;
  --surface-subtle: #f5f5f3;
  --surface-raised: #eaeae7;
  --ink: #292a28;
  --muted: #666863;
  --line: #e7e7e3;
  --navy: #252624;
  --navy2: #333532;
  --white: #fff;
  /* Card and tile hairline: softer than a full --line border. */
  --card-line: color-mix(in srgb, var(--line) 60%, transparent);
  /* The wordmark is dark ink on transparency, so its plate stays light in both
     themes; in dark mode it is toned down instead of pure white. */
  --logo-plate: #fff;

  /* ---- brand and accents -------------------------------------------- */
  --accent: #c2603d;
  --accent-soft: #f8e2d5;
  --accent-text: #733519;
  --primary-bg: #bd5935;
  --primary-hover: #a74928;
  --on-primary: #fffaf6;
  --teal: #5c7168;
  --teal-light: #eaf0eb;
  --link-hover: #933b20;
  --focus: #ad5334;

  /* ---- status palette ------------------------------------------------ */
  --success-bg: #e0f4ca;
  --success-text: #32602b;
  --warning-bg: #fbf0b9;
  --warning-text: #725c17;
  --error-bg: #f7dbc7;
  --error-text: #8e3e25;
  --info-bg: #e9eeeb;
  --info-text: #496258;
  --danger: #a93e39;
  --amber: #8e6d24;

  /* ---- money -------------------------------------------------------- */
  /* One reading for an amount, wherever it appears: a tile, a table cell,
     a total. Always paired with a word, never colour alone. */
  --money-paid: var(--success-text);
  --money-open: var(--ink);
  --money-overdue: var(--error-text);
  --money-draft: var(--muted);

  /* ---- document states ----------------------------------------------- */
  /* draft = not numbered, unsent = numbered but not delivered,
     open = issued and waiting, overdue = past due, paid = settled,
     advance = advance invoice / its tax document. */
  --state-draft-bg: var(--surface-raised);
  --state-draft-text: var(--muted);
  --state-unsent-bg: var(--info-bg);
  --state-unsent-text: var(--info-text);
  --state-open-bg: var(--warning-bg);
  --state-open-text: var(--warning-text);
  --state-overdue-bg: var(--error-bg);
  --state-overdue-text: var(--error-text);
  --state-paid-bg: var(--success-bg);
  --state-paid-text: var(--success-text);
  --state-advance-bg: var(--info-bg);
  --state-advance-text: var(--info-text);

  /* ---- charts -------------------------------------------------------- */
  --chart-issued: #d49a79;
  --chart-received: #7f9d8e;
  --chart-grid: color-mix(in srgb, var(--muted) 25%, transparent);
  /* Hatching on the issued bars; reads in both themes because it is mixed
     from the surface it sits on, not from white. */
  --chart-hatch: color-mix(in srgb, var(--surface) 45%, transparent);
  /* Categorical series for the report donut and legend, in order. */
  --chart-1: #77c9bd;
  --chart-2: #769cc2;
  --chart-3: #b1a5dc;
  --chart-4: #daa96c;
  --chart-5: #bf8298;
  --chart-6: #72859e;

  /* ---- elevation and overlay ----------------------------------------- */
  /* The two *-color tokens are the shadow colour only; each rule keeps its
     own offsets, so a popup and a dialog can differ in distance, not in hue. */
  --shadow: 0 8px 24px #25262005;
  --shadow-raised-color: #25262014;
  --shadow-overlay-color: #2526202e;
  --overlay: #10100f73;
}

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

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

  --bg: #121212;
  --surface: #202020;
  --surface-subtle: #191919;
  --surface-raised: #2c2c2c;
  --ink: #f0f0ed;
  --muted: #afafaa;
  --line: #363634;
  --navy: #202020;
  --navy2: #2c2c2c;
  --logo-plate: #e9e9e5;

  --accent: #d29879;
  --accent-soft: #46332b;
  --accent-text: #f0c1a5;
  --primary-bg: #cc9475;
  --primary-hover: #dcaa8e;
  --on-primary: #241d18;
  --teal: #a5b8aa;
  --teal-light: #29382e;
  --link-hover: #f0c1a5;
  --focus: #d29879;

  --success-bg: #2c402c;
  --success-text: #b9d3a5;
  --warning-bg: #443c26;
  --warning-text: #e6d493;
  --error-bg: #493128;
  --error-text: #efb097;
  --info-bg: #313b35;
  --info-text: #bed0c4;
  --danger: #efaaa0;
  --amber: #e6d493;

  --chart-issued: #c3977d;
  --chart-received: #8aa998;
  --chart-1: #8fd6cb;
  --chart-2: #93b6d8;
  --chart-3: #c3b9e8;
  --chart-4: #e8bd85;
  --chart-5: #d49aae;
  --chart-6: #93a5bc;

  --shadow: 0 4px 18px #0000000c;
  --shadow-raised-color: #00000059;
  --shadow-overlay-color: #00000073;
  --overlay: #0a0a09a6;
}

/* The page background is declared once, here, so no theme switch flashes. */
html,
body {
  background: var(--bg);
}

body {
  color: var(--ink);
}