/* =========================================================
   Zorveza - Design System Tokens (tokens.css)
   Palette: paper + ink, ledger green accent, receipt amber
   Typography: Outfit (display), Inter (body), JetBrains Mono (figures)
   ========================================================= */

:root {
  /* Core Surfaces & Ink Palette */
  --paper: #f5f1e8;
  /* base background */
  --paper-2: #ece6d8;
  /* recessed surfaces */
  --card: #fbf9f4;
  /* raised surfaces */
  --ink: #1c1b18;
  /* body text */
  --ink-2: #4a4740;
  /* secondary text */
  --ink-3: #7d786c;
  /* muted labels */
  --line: #d9d2c1;
  /* hairlines */

  /* Brand & Semantic Accents */
  --accent: #1f5a44;
  /* ledger green - CTAs, key data */
  --accent-hover: #174836;
  /* darker ledger green hover */
  --accent-ink: #f3efe4;
  /* text on accent */
  --accent-soft: #dfe8df;
  /* accent tints */
  --amber: #e2a03f;
  /* secondary - small highlights only */
  --amber-soft: #fdf3df;
  /* warm amber tint */
  --alert: #b8452b;
  /* low-stock / error states */
  --alert-soft: #fbeae5;
  /* soft alert background */

  /* Typography Families */
  --f-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid Type Scale */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1rem;
  --t-lg: 1.1875rem;
  --t-xl: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
  --t-2xl: clamp(1.85rem, 1.35rem + 2vw, 3rem);
  --t-3xl: clamp(2.5rem, 1.5rem + 4vw, 5.25rem);

  /* Spacing Scale (4px base - balanced vertical rhythm) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 28px;
  --s-7: 40px;
  --s-8: clamp(40px, 5vw, 56px);
  --s-9: clamp(52px, 6.5vw, 72px);
  --s-10: clamp(72px, 8vw, 96px);

  /* Border Radii */
  --radius-xs: 3px;
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;
  --radius-pill: 9999px;

  /* Layout & Grid */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);

  /* Restrained Shadows */
  --shadow-1: 0 1px 0 rgba(28, 27, 24, 0.06), 0 8px 24px -12px rgba(28, 27, 24, 0.18);
  --shadow-2: 0 2px 0 rgba(28, 27, 24, 0.05), 0 24px 48px -24px rgba(28, 27, 24, 0.28);

  /* Motion & Easing */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 160ms;
  --d-med: 420ms;
  --d-slow: 800ms;

  /* Z-Index Layers */
  --z-header: 50;
  --z-menu: 60;
}