/* ============================================================
   STICKY BOOKS — DESIGN TOKENS
   Raw brand values live here, and only here. Components read the
   semantic names below, never a hex code or a magic number — retune
   the brand by editing this file and every component follows.

   Concept: honeycomb ledger. Cream paper, honey highlights, a grape
   accent, thick "ink" outlines and hard offset shadows — a sticker
   pressed onto a page, not a soft SaaS gradient.
   ============================================================ */

:root {
  /* ---------- Palette (raw) ---------- */
  --ink:        #1A1410; /* near-black warm brown — borders, text, shadows */
  --cream:      #FFF8ED; /* page background */
  --cream-2:    #F0E4D0; /* hairline dividers on cream */
  --honey:      #FFC53D; /* primary action color */
  --honey-soft: #FFE9AE; /* tinted highlight surface */
  --grape:      #6B3FA0; /* accent color */
  --grape-soft: #EAE0F5; /* tinted accent surface */
  --white:      #FFFFFF;

  /* ---------- Semantic surfaces ---------- */
  --bg-page:      var(--cream);
  --bg-surface:   var(--white);
  --bg-highlight: var(--honey-soft);
  --bg-accent:    var(--grape);

  /* ---------- Semantic text ---------- */
  --text-body:      var(--ink);
  --text-muted:     #7A6F62;
  --text-on-honey:  var(--ink);
  --text-on-accent: var(--white);

  /* ---------- Action (buttons) ---------- */
  --action-bg:     var(--honey);
  --action-border: var(--ink);
  --action-shadow: 3px 3px 0 var(--ink);

  /* ---------- Status pills ---------- */
  --status-open:        #FFD54A;
  --status-open-text:   var(--ink);
  --status-cured:       #7CC576;
  --status-cured-text:  #123A0E;
  --status-empty:       var(--cream-2);
  --status-empty-text:  #5A5044; /* darker than --text-muted: 4.9:1 fails on cream-2, this clears 6.2:1 */

  /* ---------- Flags (row/cell-level warnings — distinct from PO status
     pills above, which are about order lifecycle, not inventory urgency) --- */
  --flag-critical:      #F7D5C7;
  --flag-critical-text: #7A2E12; /* 6.1:1 on --flag-critical */
  --flag-warning:       var(--honey-soft);
  --flag-warning-text:  var(--ink);

  /* ---------- Focus ---------- */
  --focus-ring: var(--grape);

  /* ---------- Type ---------- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, SFMono-Regular, monospace;

  --weight-regular: 400;
  --weight-bold:    700;
  --weight-heavy:   800;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;

  /* ---------- Space ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;

  /* ---------- Shape ---------- */
  --border-width: 2px;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sticker: 4px 4px 0 var(--ink);

  /* ---------- Motion ---------- */
  --dur-fast: 150ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}