/* ============================================================================
   tokens.css — "Ledger Light" design tokens · Picole Manager v0.01
   ----------------------------------------------------------------------------
   THE ONLY FILE WHERE RAW COLOR / SIZE VALUES MAY BE DEFINED.
   Every other stylesheet reads var(--token) exclusively.
   Dark mode (future): override tokens inside [data-theme="dark"] below —
   never touch component CSS (DECISIONS D3). The block ships EMPTY in v0.01.
   ============================================================================ */
:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --canvas:  #f8fafc;   /* page background */
  --surface: #ffffff;   /* cards, sidebar, inputs, table bodies */
  --sunken:  #eef2f7;   /* wells, hover fills, disabled inputs, skeletons */

  /* ---- Text -------------------------------------------------------------- */
  --ink:   #0f172a;     /* headings, primary cells, figures */
  --body:  #334155;     /* default text */
  /* Labels, captions, secondary metadata, the € symbol. Darkened from #64748b, which
     cleared 4.5:1 on white and on the canvas but measured 4.23:1 on --sunken — the
     weekend rows of the revenue grid and the sum-check strip put muted text on exactly
     that surface (axe sweep, round 9). This value clears 4.5 on all three: 5.43 on
     --surface, 5.20 on --canvas, 4.83 on --sunken. */
  --muted: #5c6b7f;

  /* ---- Lines ------------------------------------------------------------- */
  --hairline:        #e2e8f0;  /* card borders, table dividers */
  --hairline-strong: #cbd5e1;  /* dividers with more weight: tfoot rules, dashed drops */
  /* The edge of a control. It has to clear 3:1 against every surface a control sits on
     — card white, page canvas, disabled sunken — because for an input whose fill is the
     same white as the card, the border IS the control (WCAG 1.4.11). --hairline-strong
     measured 1.48:1 and was doing that job (QA round 7, N-6).
     Measured: 3.64:1 on --surface, 3.48:1 on --canvas, 3.24:1 on --sunken. */
  --control-border: #7c8797;

  /* ---- Accent (the ONLY accent hue in the app) ---------------------------- */
  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-strong: #4338ca;             /* accent-colored TEXT (links on tint) */
  --accent-tint:   #eef2ff;             /* active nav pill, info surfaces */
  --accent-tint-2: #e0e7ff;             /* nav count badge, avatar circle */
  --on-accent:     #ffffff;             /* text on solid accent */
  /* The button focus ring. WCAG 2.2 §1.4.11 wants 3:1 for the visual information that
     identifies a component's state, and .35 alpha composited to 1.76:1 against a card —
     a halo you could see but not one that MEETS the rule (QA round 9, installer review;
     axe does not test focus-indicator contrast, which is why eight rounds missed it).
     At .75 it measures 3.78:1 on --surface, 3.67:1 on --canvas, 3.50:1 on --sunken. */
  --ring:      rgba(79, 70, 229, .75);  /* button focus ring (D1) */
  --ring-soft: rgba(79, 70, 229, .15);  /* input focus ring */
  --selection: rgba(79, 70, 229, .16);  /* ::selection background */
  /* Placeholder text is TEXT: 4.5:1 like any other. The old value measured 2.56:1, and
     on the supplier search — whose <label> is .sr-only — it was also the only visible
     label the field had (QA round 7, N-9). Both halves are fixed: this reads 4.59:1 on
     a card and 4.39:1 on the canvas, and that search now carries a visible label. */
  --placeholder: #5f6b7c;

  /* ---- Status triples: text / tint background / border --------------------
     Used ONLY by .pill, .callout, validation text, toast icons. Contrast of
     every text/bg pair verified >= 4.5:1 (see DS-9 table). ------------------- */
  --status-paid-text:    #067647;  /* Plačano */
  --status-paid-bg:      #ecfdf3;
  --status-paid-border:  #abefc6;

  --status-pending-text:   #b54708;  /* Čaka plačilo */
  --status-pending-bg:     #fffaeb;
  --status-pending-border: #fedf89;

  --status-overdue-text:   #b42318;  /* Zapadlo · Neuspešno branje */
  --status-overdue-bg:     #fef3f2;
  --status-overdue-border: #fecdca;

  --status-review-text:   #4338ca;  /* V pregledu */
  --status-review-bg:     #eef2ff;
  --status-review-border: #c7d2fe;

  --status-neutral-text:   #52525b;  /* Osnutek · Razveljavljeno · Dobropis · Brez dokumenta */
  --status-neutral-bg:     #f4f4f5;
  --status-neutral-border: #e4e4e7;

  /* ---- Semantic aliases (buttons, callouts, form validation) -------------- */
  --danger:        #b91c1c;   /* destructive buttons, error text (6.47:1 on white) */
  --danger-hover:  #991b1b;
  --danger-bg:     var(--status-overdue-bg);
  --danger-border: var(--status-overdue-border);
  --warn-text:     var(--status-pending-text);
  --warn-bg:       var(--status-pending-bg);
  --warn-border:   var(--status-pending-border);
  --info-text:     var(--status-review-text);
  --info-bg:       var(--status-review-bg);
  --info-border:   var(--status-review-border);
  --success-text:  var(--status-paid-text);
  --success-bg:    var(--status-paid-bg);
  --success-border:var(--status-paid-border);

  /* ---- Toast icon colors (on the ink toast surface) ----------------------- */
  --toast-success: #6ee7b7;   /* emerald-300 */
  --toast-error:   #fca5a5;   /* red-300 */
  --toast-info:    #a5b4fc;   /* indigo-300 */
  --toast-warning: #fcd34d;   /* amber-300 */

  /* ---- Typography ---------------------------------------------------------- */
  --font-ui:   "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs:    12px;    /* pills, badges, uppercase section labels */
  --text-sm:    13px;    /* form labels, hints, crumbs, secondary cells */
  --text-table: 13.5px;  /* table body cells */
  --text-base:  14px;    /* body, buttons, inputs */
  --text-lg:    16px;    /* card titles, dialog titles */
  --text-xl:    18px;    /* rarely: subsection titles */
  --text-title: 22px;    /* page title (h1) */
  --text-figure: 26px;   /* dashboard stat figures (range 24–28 -> fixed 26) */

  /* ---- Spacing scale — the ONLY gaps/paddings/margins allowed -------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- Radii — exactly three (D1) ------------------------------------------ */
  --r-ctl:  6px;      /* buttons, inputs, selects, menus' items, callouts */
  --r-card: 10px;     /* cards, table cards, dialogs, dropzone, toasts */
  --r-pill: 9999px;   /* status pills, count badges, chips, progress bars */

  /* ---- Elevation ------------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06);   /* the one surface shadow (D1) */
  --shadow-2: 0 4px 12px rgba(15, 23, 42, .10);  /* floating overlays ONLY:
                                                    dropdown menus, dialog, drawer */
  --shadow-up: 0 -4px 12px rgba(15, 23, 42, .08); /* --shadow-2 cast UPWARD: the one
                                                    sticky bottom bar (review actions),
                                                    so content passing under it reads as
                                                    passing under something */

  /* ---- Z-index scale --------------------------------------------------------- */
  --z-sticky:   10;    /* sticky thead */
  --z-dropdown: 100;   /* kebab menus, user menu */
  --z-backdrop: 200;   /* drawer backdrop */
  --z-drawer:   210;   /* mobile sidebar */
  --z-toast:    400;   /* toast stack (native <dialog> uses the top layer) */
  --z-skip:     500;   /* skip link when focused */

  /* ---- Motion ----------------------------------------------------------------- */
  --dur-1: 150ms;                      /* color/background/border transitions */
  --dur-2: 200ms;                      /* drawer, dialog, toast enter/leave */
  --ease:  cubic-bezier(.2, 0, 0, 1);

  /* ---- Component metrics -------------------------------------------------------- */
  --ctl-h:    36px;    /* button height */
  --input-h:  38px;    /* input/select height */
  --row-h:    44px;    /* table row height */
  --sidebar-w: 240px;
  --topbar-h:  60px;
  --content-max: 1200px;
  --form-max:  600px;  /* comfortable measure for a single-column form */
  /* Control widths. A form row is two-up, so one control is half the measure minus the
     gap — and THAT is the width every control on a screen has to agree with, filter
     bars included. A filter <select> was 371px beside a form <select> of 294px on the
     same page, which reads as two design systems (QA round 4). --ctl-w-sm is for a
     control whose value is two or three characters: a day number, a sort order. */
  --ctl-w:     calc((var(--form-max) - var(--sp-3)) / 2);
  --ctl-w-sm:  132px;

  /* ---- Charts (Phase 2) ---------------------------------------------------------
     Read by assets/js/analytics.js via getComputedStyle: a canvas fill cannot resolve
     a custom property, so these are looked up once at init and passed as real colours.
     Categorical palette for the four sales channels, fixed order = enum order — the
     colour follows the CHANNEL, never the rank, so a channel with no data this month
     keeps its slot instead of handing it to whoever is now fourth.
     Validated (08 §1.7, light surface #ffffff): lightness band PASS, chroma PASS,
     adjacent-pair CVD worst ΔE 11.0 (protan, ≥8 target) PASS, normal-vision worst
     adjacent ΔE 21.4 (≥15) PASS, contrast vs surface ≥3:1 PASS (measured 3.19–6.29:1).
     Status colours (--status-*-text) are NEVER series colours — those mean state. */
  --chart-1: #4f46e5;      /* Lastna dostava (accent indigo) — 6.29:1 on white */
  --chart-2: #0891b2;      /* Wolt (cyan)                    — 3.68:1 */
  --chart-3: #d97706;      /* Prevzem (amber)                — 3.19:1 */
  --chart-4: #047857;      /* V lokalu (emerald)             — 5.48:1 */
  /* Previous-period comparison bars. 08 §1.7 proposed #cbd5e1, which is 1.48:1 on a
     white card — a bar carrying last month's number is content, and at that contrast
     it is barely a bar at all. Darkened until it clears 3:1 (3.25:1 on --surface,
     3.11:1 on --canvas) while staying clearly recessive next to the four series. It is
     told apart from the current period by position, legend and the table under every
     chart, never by fill alone. */
  --chart-prev: #8290a1;
  --chart-grid: var(--hairline);
  --chart-tick: var(--muted);
}

/* ============================================================================
   DARK THEME — INTENTIONALLY EMPTY IN v0.01 (DECISIONS D3).
   When dark ships (a later release), override tokens here ONLY — component
   CSS must not change. Never ship a partially filled block: it is all-or-none.
   The .upn-slip component is theming-EXEMPT and must keep white/ink even here
   (DECISIONS §3.7 — QR codes are always black-on-white).
   ============================================================================ */
[data-theme="dark"] {
}