/* ============================================================
   Savory Marketing — variables.css
   Design tokens. THE single source of every color/type/space/motion value.
   Transcribed from Savoryv2 Palette.swift (Calm Indigo v5).
   RULE: zero raw hex outside this file (documented SVG fills excepted).
   ============================================================ */
:root {
  --canvas:#F6F7F9; --surface:#FFFFFF; --surface-raised:#FFFFFF; --surface-sunken:#F1F3F6;
  --surface-hover:rgba(27,31,39,.05); --surface-selected:rgba(74,86,174,.10);
  --ink:#1B1F27; --ink-secondary:#5B6573; --ink-tertiary:#8B95A5; --ink-ghost:#B4BCC9;
  --accent:#4A56AE; --accent-hover:#3E498F; --accent-active:#343D78;
  --accent-soft:#ECEEF8; --accent-line:#C7CCEC;
  --line:#E4E7EC; --line-soft:#ECEEF2; --line-strong:#D3D8E0;
  --positive:#2F7A57; --positive-soft:#E7F1EC; --positive-strong:#256B49;
  --caution:#A9791F; --caution-soft:#F8F0DC;
  --critical:#BC4A30; --critical-soft:#FAEBE6;
  --info:#2E6C97; --info-soft:#E6EFF6;
  --search-mark:#F5C84B; --search-mark-ink:#5A4600;
  --graphite:#1B1F27; --graphite-raised:#2A2F3B; --graphite-text:#C3C9D4;
  --graphite-bright:#F2F4F8; --graphite-accent:#97A2E3; --graphite-accent-hover:#A9B2E9;
  --graphite-ink:#14161C; --graphite-line:rgba(242,244,248,.09);
  --graphite-ghost-line:rgba(242,244,248,.22); --graphite-ghost-hover:rgba(242,244,248,.07);
  --hue-slate:#EAEDF2; --hue-slate-ink:#566374;
  --hue-sage:#E7F0EA;  --hue-sage-ink:#46705C;
  --hue-clay:#F2EAE4;  --hue-clay-ink:#8A604B;
  --hue-rose:#F4E8EC;  --hue-rose-ink:#96566E;
  --hue-gold:#F4EEDD;  --hue-gold-ink:#7D6427;
  --hue-teal:#E4EFF3;  --hue-teal-ink:#37677C;
  --hue-mauve:#ECEAF4; --hue-mauve-ink:#675E93;
  --hue-fern:#E9F0E4;  --hue-fern-ink:#4F6B3F;
  /* Theme-INVARIANT bright hue inks (deliberately NOT re-pointed under
     [data-theme="dark"]): a blog category chip sits on the always-dark graphite
     hero band regardless of the site theme, so it needs a fixed light-on-dark ink. */
  --hue-teal-bright:#86B4C7; --hue-mauve-bright:#ADA0D6; --hue-sage-bright:#93BCA4;
  /* marks / labels on solid color fills */
  --accent-ink:#FFFFFF;                /* label/mark on accent fill; theme-swaps for contrast */
  --fill-mark:#FFFFFF;                 /* stable white mark inside theme-stable chrome (recorder square, mock checkmarks) */
  /* app-mockup chrome */
  --mock-tl-red:#F26D5F; --mock-tl-yellow:#F3BE4F; --mock-tl-green:#5FC454;  /* macOS window traffic lights */
  --rec-ring:rgba(224,141,119,.45);    /* recorder breathing-ring stroke (soft critical) */
  --shadow-card-hover:0 4px 14px rgba(20,28,46,.08);  /* post-card hover lift (cool-tinted) */
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --r-chip:6px; --r-btn:8px; --r-card:12px; --r-hero:16px; --r-full:999px;
  --ease-settle:cubic-bezier(.16,1,.3,1); --ease-standard:cubic-bezier(.2,0,0,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --shadow-nav:0 1px 2px rgba(20,28,46,.05);
  --shadow-float:0 16px 40px rgba(20,28,46,.14);
  --shadow-recorder:0 18px 44px -12px rgba(20,24,33,.55);
  --nav-h:64px; --container:1180px;
  --measure-headline:52rem; /* cap for h1/h2 display headings - wide enough that a single-sentence h1 fits one line at max clamp size */
  --measure-head:38rem; /* cap for ledes/subs so supporting prose stays a comfortable reading width (~70ch at 17px) */
  --focus-ring:0 0 0 2px var(--canvas),0 0 0 3.5px var(--accent-line);
}
[data-theme="dark"] { color-scheme:dark;
  --canvas:#14161C; --surface:#1B1E26; --surface-raised:#222630; --surface-sunken:#101218;
  --surface-hover:rgba(232,234,240,.06); --surface-selected:rgba(151,162,227,.12);
  --ink:#E8EAF0; --ink-secondary:#A8B0BF; --ink-tertiary:#7A8290; --ink-ghost:#565E6B;
  --accent:#97A2E3; --accent-hover:#A9B2E9; --accent-active:#8892DB;
  --accent-soft:rgba(151,162,227,.14); --accent-line:rgba(151,162,227,.42);
  --line:#262B36; --line-soft:#20242E; --line-strong:#333A48;
  --positive:#7FC29B; --positive-soft:rgba(127,194,155,.14); --positive-strong:#7FC29B;
  --caution:#D3B36A; --caution-soft:rgba(211,179,106,.14);
  --critical:#E08D77; --critical-soft:rgba(224,141,119,.14);
  --info:#85B2D4; --info-soft:rgba(133,178,212,.14);
  --search-mark:#D9A63C; --search-mark-ink:#2A1E00;
  --accent-ink:#14161C;                /* on light-indigo accent in dark */
  --hue-slate:#232730; --hue-slate-ink:#A3ADBE;
  --hue-sage:#1E2823;  --hue-sage-ink:#93BCA4;
  --hue-clay:#2A231D;  --hue-clay-ink:#C9A183;
  --hue-rose:#2A2026;  --hue-rose-ink:#CE9AB1;
  --hue-gold:#292418;  --hue-gold-ink:#CDB06A;
  --hue-teal:#1C262B;  --hue-teal-ink:#86B4C7;
  --hue-mauve:#242231; --hue-mauve-ink:#ADA0D6;
  --hue-fern:#20281C;  --hue-fern-ink:#9CBB82;
  --shadow-nav:0 1px 2px rgba(0,0,0,.4);
  --shadow-float:0 16px 40px rgba(0,0,0,.5);
}
/* Print medium re-points color tokens to ink-on-white. Kept here so this file
   remains the single home of every raw color value (gate 1). */
@media print {
  :root{
    --canvas:#FFFFFF; --surface:#FFFFFF; --surface-raised:#FFFFFF; --surface-sunken:#FFFFFF;
    --ink:#000000; --ink-secondary:#222222; --ink-tertiary:#444444; --ink-ghost:#666666;
    --line:#CCCCCC; --line-soft:#DDDDDD; --line-strong:#BBBBBB;
    --accent:#000000; --accent-hover:#000000;
  }
}