/* Loggad — color tokens
   Base palette in OKLCH (perceptually uniform) + semantic aliases consumed by components.
   Direction: "Paper & Green" — warm editorial paper, near-black ink, and the approved
   logotype green #3aaa35 (oklch 65.1% 0.185 142.5) as THE accent. The logo files carry
   the exact brand hex; the UI scale below keeps the hue and steps darker where a
   contrast floor demands it — the raw logo green itself only reaches ~3:1 under white
   text, so it is never a control fill. The "verified" status hue shares the brand hue
   (142) so the stamp/checkmark states read as the same green family. */

:root {
  /* ---- base neutrals: warm paper & ink, not cold gray ---- */
  --paper-0: oklch(98.2% 0.004 90); /* page background */
  --paper-1: oklch(96.3% 0.006 88); /* card / raised surface */
  --paper-2: oklch(93.5% 0.008 86); /* sunken surface, table stripe */
  --line-1: oklch(89% 0.007 80); /* hairline border, default */
  --line-2: oklch(80% 0.009 78); /* stronger border, input focus rest */

  --ink-0: oklch(19% 0.012 55); /* primary text / near-black */
  --ink-1: oklch(34% 0.012 55); /* secondary text */
  --ink-2: oklch(52% 0.012 60); /* tertiary text, placeholders */
  --ink-3: oklch(68% 0.01 65); /* disabled text */

  /* ---- accent scale: the brand green, darkened for text-on-fill ---- */
  /* Loggad green is the ONE accent (AD-158) — there is no accent choice.
     500 is the solid fill under near-white --accent-text-on (white text 4.9:1,
     WCAG AA). 300 is the light step accent text/progress use on dark surfaces;
     700 the dark step they use on light. */
  --accent-100: oklch(94% 0.05 142); /* tint: chips, light accent artifacts */
  --accent-300: oklch(74% 0.14 142); /* accent text/progress on dark surfaces */
  --accent-500: oklch(52% 0.14 142); /* primary action fill */
  --accent-600: oklch(46% 0.13 142); /* hover */
  --accent-700: oklch(41% 0.115 142); /* active; accent text on light */

  /* ---- verified green: the "stamped" / confirmed state, the brand hue ---- */
  --verified-100: oklch(93% 0.045 142);
  --verified-500: oklch(46% 0.1 142);
  --verified-600: oklch(39% 0.095 142);

  /* ---- utility hues ---- */
  --danger-100: oklch(93% 0.04 27);
  --danger-500: oklch(52% 0.16 27);
  --danger-600: oklch(44% 0.15 27);

  --info-100: oklch(93% 0.03 235);
  --info-500: oklch(52% 0.08 235);

  --warning-100: oklch(93% 0.06 85);
  --warning-500: oklch(62% 0.13 78);
  /* Dark step for warning TEXT on the light --warning-tint chip (for example,
     a pending badge): warning-500 on the tint was 3.02:1 (AA fail). */
  --warning-700: oklch(47% 0.14 78); /* on warning-tint 5.6:1 */

  /* ---- semantic aliases (use these in components) ---- */
  --bg-page: var(--paper-0);
  --bg-surface: var(--paper-1);
  --bg-surface-sunken: var(--paper-2);
  --bg-inverse: var(--ink-0);

  --border-default: var(--line-1);
  --border-strong: var(--line-2);
  /* The perceivable boundary of an active form control (WCAG 1.4.11, 3:1) —
     the hairline --border-default is ~1.3:1 and vanishes. Theme-aware
     (re-pointed for dark in theme.css). Use on inputs/selects, not on
     decorative content hairlines. */
  --border-input: oklch(60% 0.012 78);

  --text-primary: var(--ink-0);
  --text-secondary: var(--ink-1);
  --text-tertiary: var(--ink-2);
  --text-disabled: var(--ink-3);
  --text-inverse: var(--paper-0);

  --accent-default: var(--accent-500);
  --accent-hover: var(--accent-600);
  --accent-active: var(--accent-700);
  --accent-tint: var(--accent-100);
  /* On-color for the accent FILL. A FIXED near-white, NOT var(--paper-0):
     the accent fill is theme-independent (a medium green in both
     themes), so the label must stay light in both — following paper-0 flips
     it to near-black in dark and fails AA. */
  --accent-text-on: oklch(98.2% 0.004 90);
  /* Fixed dark ink for deliberately light accent artifacts (photo
     placeholder markings). It must not follow the page theme. */
  --accent-ink-on-light: oklch(19% 0.012 55);
  /* Accent-colored TEXT on a page/surface background. A dark accent step on
     light; re-pointed to a light step for dark (theme.css) so it clears WCAG
     AA in both themes. Use this for accent-colored
     text — NOT the raw scale, which has no dark-theme step. */
  --text-accent: var(--accent-700);
  /* Full accent-tinted surface containing ordinary theme-aware text (selected
     states, active filter chips). Unlike the fixed-light --accent-tint chip,
     this follows the theme so --text-primary stays readable inside it —
     mirrors --verified-surface / --warning-surface. */
  --accent-surface: var(--accent-100);

  /* Non-text progress fill. Unlike the
     action-fill aliases, it flips to a light scale step in dark mode so a meter
     remains distinguishable from its sunken track at the 3:1 UI floor. */
  --progress-fill: var(--accent-700);

  --verified-default: var(--verified-500);
  --verified-hover: var(--verified-600);
  --verified-tint: var(--verified-100);
  /* Verified green as a FOREGROUND (icon / status text) on the neutral
     page/surface — theme-aware (a light step on dark, theme.css). The raw
     ramp is dark and drops below 3:1 on the dark surface; the tint-chip uses
     keep the ramp (light-on-light, fine in both themes). */
  --verified-fg: var(--verified-500);
  /* Status icon on --bg-inverse. In light mode that surface is dark, so this
     is deliberately light; theme.css flips it for the light inverse surface. */
  --verified-on-inverse: oklch(82% 0.12 142);
  /* Full success/accepted callout surface. Unlike --verified-tint chips, this
     follows the theme so ordinary text tokens stay readable inside it. */
  --verified-surface: var(--verified-100);

  --danger-default: var(--danger-500);
  --danger-hover: var(--danger-600);
  --danger-tint: var(--danger-100);
  /* Destructive CALLOUT surface + readable foreground. Keep --danger-tint
     for compact fixed-pair chips; full panels contain theme-aware body and
     action text, so their surface must follow the theme. */
  --danger-surface: var(--danger-100);
  --danger-fg: var(--danger-600);
  --danger-on-inverse: oklch(84% 0.11 27);

  --info-default: var(--info-500);
  --info-tint: var(--info-100);

  --warning-default: var(--warning-500);
  --warning-tint: var(--warning-100);
  /* Warning CALLOUT surface + its foreground — for a full tinted card/banner
     (operational notices and the low-balance pill), NOT the tiny chip.
     Unlike --warning-tint (a theme-independent LIGHT chip that pairs with the
     dark --warning-700 text), a callout FOLLOWS the theme: a soft cream in
     light, a dark warm surface in dark (re-pointed in theme.css) so the normal
     theme-aware text tokens (--text-primary/-secondary/-accent) read on it in
     BOTH themes. --warning-fg is the amber accent (heading icon, caps label):
     a dark step on light, a light step on dark — mirrors --verified-fg /
     --text-accent. Pairing --warning-700 (dark) on the dark surface was the
     dark-mode light-on-light regression this pair fixes. */
  --warning-surface: var(--warning-100);
  --warning-fg: var(--warning-700);

  --focus-ring: var(--ink-0);
}

/* Theme-independent illustration tokens for physical objects (steel badge, photographed plate).
   A photograph does not change colour with the reader's theme, so these values never flip in theme.css.
   Decorative only: no text carrying meaning is set on them except engraved code (aria-hidden). */
:root {
  --steel-100: oklch(94% 0.004 250); /* brushed highlight */
  --steel-300: oklch(82% 0.006 250); /* brushed mid */
  --steel-500: oklch(66% 0.008 250); /* brushed shadow, bevel */
  --steel-engrave: oklch(34% 0.01 250); /* engraved QR modules and code */

  --photo-wall: oklch(42% 0.012 70); /* the wall behind the plate in the photo */
  --photo-plate: oklch(88% 0.01 90); /* the plate itself */
  --photo-plate-ink: oklch(24% 0.01 60); /* printed text on the plate */
  --photo-scan: oklch(74% 0.14 142); /* the scanning line (brand hue, light step) */
}