/* ==========================================================================
   nezprod — design tokens (Aning Film design system)

   Source of truth: afweb `assets/styles.css` (theme tokens) and the
   havc-explorer DESIGN.md ("The Public Ledger Desk"). Values marked
   "verbatim" are copied unchanged; everything else is derived here.

   --ink is the BACKGROUND, --paper is the TEXT colour. Dark is the default.
   The theme class lives on <html> (theme-auto | theme-dark | theme-light):
   js/theme-init.js sets it from localStorage['aning-theme'] before first
   paint, which is only possible on <html> because <body> does not exist yet
   when a <head> script runs.
   ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────────
   Self-hosted copies of the afweb fonts. They are VARIABLE fonts: afweb ships
   byte-identical files per weight (albert-sans-400 == -700, etc.), so one
   file per family and subset is declared here with a weight range. Each
   family has a latin and a latin-ext subset; Croatian č ć đ š ž live in
   latin-ext (U+0100–02BA), € and the basic set in latin. Arrows (→ ↗) and
   ✕ ◐ ☀ ☾ are in neither and fall back to the system font, as on afweb. */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/albert-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/albert-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Theme-independent tokens ─────────────────────────────────────────── */
:root {
  /* Type: the three voices. Bricolage orients, Albert Sans reads,
     JetBrains Mono carries evidence (labels, amounts, dates, provenance). */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Motion (afweb): hover 80ms, chips 180ms, view entrance 180ms,
     panels 460ms on the afweb layout curve. */
  --dur-hover: 80ms;
  --dur-chip: 180ms;
  --dur-view: 180ms;
  --dur-panel: 460ms;
  --ease-panel: cubic-bezier(0.2, 0.8, 0.2, 1); /* verbatim --afhr-layout-ease */
  --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Layout */
  --container: 1200px;
  --gutter: 28px;            /* 16px under 820px, see layout.css */
  --tap: 44px;               /* minimum touch target under 820px */
  --tabbar-h: 60px;          /* mobile bottom tab bar, excl. safe area */
  --measure: 70ch;           /* reading width for prose */

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Shape: square by default */
  --radius-0: 0;
  --radius-code: 2px;
  --radius-soft: 6px;
  --radius-pill: 999px;

  /* Category hues (afweb THREAD_HUES, verbatim) and their topic mapping.
     Use them for borders, dots and fills only. Text on a hue fill is the
     literal dark ink #2e2522 (5.1–6.8:1 on every hue except red, whose
     fills use --red-fill with cream text instead). */
  --hue-red: #c14843;
  --hue-amber: #e8a04a;
  --hue-green: #7fb38a;
  --hue-blue: #7a9bc4;
  --hue-violet: #b88ad6;
  --hue-pink: #d97a91;
  --cat-razvoj: var(--hue-green);
  --cat-proizvodnja: var(--hue-blue);
  --cat-porez: var(--hue-violet);
  --cat-rok: var(--hue-red);
  --cat-dokument: var(--hue-pink);
  --cat-warn: var(--hue-amber);

  --on-hue: #2e2522;         /* text on a hue fill */
  --on-red: #f4ede2;         /* text on a red fill (afweb: always cream) */

  /* Shadows: flat by default; one soft shadow for true overlays only. */
  --shadow-overlay: 0 40px 80px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 -20px 40px rgba(0, 0, 0, 0.34);
  --overlay-bg: rgba(20, 16, 14, 0.84);   /* modal backdrop (afweb) */
}

/* ── Dark theme (default) ─────────────────────────────────────────────── */
:root,
html.theme-dark {
  color-scheme: dark;
  /* verbatim afweb */
  --ink: #2e2522;
  --ink-deep: #20191698;
  --paper: #f4ede2;
  --paper-dim: #d6cebe;
  --muted: #8a7e72;
  --rule: #4a3b35;
  --panel: #382b27;
  --red: #c14843;
  --red-deep: #962f2b;

  /* ── Accessibility deviations (WCAG 2.2 AA; ratios computed with the
     WCAG relative-luminance formula) ──────────────────────────────────
     --muted #8a7e72 is 3.78:1 on ink and 3.44:1 on panel, and --red
     #c14843 is 3.05:1 on ink / 2.77:1 on panel: both FAIL for small
     text. Keep them for borders, fills, dots and text >= 18px
     (or >= 14px bold). Small text uses these instead:

       --text-dim  #b3a798  6.34:1 on ink #2e2522, 5.77:1 on panel #382b27,
                            5.14:1 on the .nz-accent tint (#4e2d29)
       --red-text  #e5847c  5.64:1 on ink, 5.13:1 on panel,
                            4.58:1 on the .nz-accent tint
       --red-fill  #b53f3a  4.83:1 under cream #f4ede2 text
                            (brand red #c14843 under cream is only 4.22:1)
       --focus     #e5847c  focus ring; 5.13:1 on panel (red on panel
                            is 2.77:1, below the 3:1 non-text minimum)
     Body text --paper is 12.86:1 on ink, 11.70:1 on panel;
     --paper-dim is 9.57:1 on ink, 8.70:1 on panel. */
  --text: var(--paper);
  --text-dim: #b3a798;
  --red-text: #e5847c;
  --red-fill: #b53f3a;
  --focus: #e5847c;
  --red-soft: rgba(193, 72, 67, 0.14);
  --surface: var(--ink);       /* what a tile/cell paints itself with */
  --code-bg: color-mix(in oklab, var(--panel) 70%, black 30%);
  --logo-on-dark: inline-block;  /* drives the CSS logo swap in layout.css */
  --logo-on-light: none;
}

/* ── Light theme ──────────────────────────────────────────────────────── */
html.theme-light {
  color-scheme: light;
  /* verbatim afweb */
  --ink: #f4ede2;
  --ink-deep: #e8dfd1;
  --paper: #2a201d;
  --paper-dim: #5a4a42;
  --muted: #8a7e72;
  --rule: #d6cebe;
  --panel: #efe5d4;
  --red: #c14843;
  --red-deep: #962f2b;

  /* Light-theme contrast:
       --muted #8a7e72 is 3.40:1 on ink #f4ede2, 3.17:1 on panel #efe5d4
       --red   #c14843 is 4.22:1 on ink, 3.94:1 on panel (fails small text)
     so:
       --text-dim  #6b5d53  5.45:1 on ink, 5.08:1 on panel
                            (inside .nz-accent it switches to --paper-dim,
                            5.44:1 on the light accent tint #e9c9bf)
       --red-text  #962f2b  (= red-deep) 6.59:1 on ink, 6.15:1 on panel,
                            4.96:1 on the accent tint
       --red-fill  #b53f3a  4.83:1 under cream text (same as dark)
       --focus     #c14843  4.22:1 on ink, 3.94:1 on panel (>= 3:1)
     Body text --paper is 13.65:1 on ink, 12.72:1 on panel;
     --paper-dim is 7.24:1 on ink, 6.75:1 on panel. */
  --text: var(--paper);
  --text-dim: #6b5d53;
  --red-text: #962f2b;
  --red-fill: #b53f3a;
  --focus: #c14843;
  --red-soft: rgba(193, 72, 67, 0.10);
  --surface: var(--ink);
  --code-bg: color-mix(in oklab, var(--panel) 80%, #2a201d 6%);
  --logo-on-dark: none;
  --logo-on-light: inline-block;
}

/* Auto follows the OS. Keep this block identical to html.theme-light. */
@media (prefers-color-scheme: light) {
  html.theme-auto {
    color-scheme: light;
    --ink: #f4ede2;
    --ink-deep: #e8dfd1;
    --paper: #2a201d;
    --paper-dim: #5a4a42;
    --muted: #8a7e72;
    --rule: #d6cebe;
    --panel: #efe5d4;
    --red: #c14843;
    --red-deep: #962f2b;
    --text: var(--paper);
    --text-dim: #6b5d53;
    --red-text: #962f2b;
    --red-fill: #b53f3a;
    --focus: #c14843;
    --red-soft: rgba(193, 72, 67, 0.10);
    --surface: var(--ink);
    --code-bg: color-mix(in oklab, var(--panel) 80%, #2a201d 6%);
    --logo-on-dark: none;
    --logo-on-light: inline-block;
  }
}

/* Mobile layout tokens */
@media (max-width: 819.98px) {
  :root {
    --gutter: 16px;
  }
}