/* ==========================================================================
   🎨 VIBECARD DESIGN TOKENS — /HUMAN-CRAFTED-UI EDITION
   Archetype Blend: Notion/Craft Warm Paper (#FAF8F5) + Linear/Stripe Hairlines & Multi-Layer Shadows
   Zero AI Slop · 1px Hairline Borders · Concentric Radii · Tabular Nums
   ========================================================================== */

:root,
html.light {
  /* Warm Editorial Paper Canvas (Notion / Craft / Airbnb DNA) */
  --m3-surface: #FAF8F5;
  --m3-surface-dim: #F3F0EA;
  --m3-surface-container-lowest: #FFFFFF;
  --m3-surface-container-low: #F4F1EA;
  --m3-surface-container: #FFFFFF;
  --m3-surface-container-high: #EFECE5;
  --m3-surface-container-highest: #E6E2D9;

  /* Grounded Botanical Forest Accent (Single Intentional Accent) */
  --m3-primary: #1F6348;
  --m3-on-primary: #FFFFFF;
  --m3-primary-container: #E4F2EC;
  --m3-on-primary-container: #103828;

  /* Warm Amber Secondary Accent for Story Highlights */
  --m3-secondary: #B85D19;
  --m3-on-secondary: #FFFFFF;
  --m3-secondary-container: #FDF0E6;
  --m3-on-secondary-container: #4A2104;

  /* Ink Hierarchy (Deep Charcoal #191918 & Warm Muted #6E6B64) */
  --m3-on-surface: #191918;
  --m3-on-surface-variant: #6E6B64;

  /* Crisp 1px Hairlines (Rauno / Linear / Stripe Spec) */
  --m3-outline: rgba(25, 25, 24, 0.14);
  --m3-outline-variant: rgba(25, 25, 24, 0.08);
  --m3-hairline: rgba(25, 25, 24, 0.07);

  /* Semantic Accents */
  --vc-amber-glow: #C25E14;
  --vc-amber-soft: #FEF3E8;
  --vc-teal-glow: #1F6348;
  --vc-danger: #C93B2B;
  --vc-glass-bg: rgba(250, 248, 245, 0.88);
  --vc-card-grad: #FFFFFF;
  --vc-card-hover-grad: #FCFBF9;

  /* Multi-Layer Ambient Elevation (Stripe / Craft Spec — No Harsh Cartoon Shadows) */
  --vc-card-shadow: 0 1px 2px rgba(25, 25, 24, 0.04), 0 4px 12px rgba(25, 25, 24, 0.04);
  --vc-selected-bg: #F1F8F5;
  --vc-selected-border: #1F6348;
  --vc-selected-shadow: 0 0 0 1.5px #1F6348, 0 4px 12px rgba(31, 99, 72, 0.08);
  --vc-shell-shadow: 0 24px 60px rgba(20, 20, 18, 0.14), 0 0 0 1px rgba(25, 25, 24, 0.08);
  --vc-top-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
}

/* Dark Mode: Linear / Raycast Carbon Surface (#0B0C0E) + Overhead Inner Highlight */
html.dark {
  --m3-surface: #0B0C0E;
  --m3-surface-dim: #08090A;
  --m3-surface-container-lowest: #08090A;
  --m3-surface-container-low: #111316;
  --m3-surface-container: #15181C;
  --m3-surface-container-high: #1C2026;
  --m3-surface-container-highest: #242930;

  --m3-primary: #4CC38A;
  --m3-on-primary: #091D13;
  --m3-primary-container: rgba(76, 195, 138, 0.14);
  --m3-on-primary-container: #B6F0D2;

  --m3-secondary: #F59E0B;
  --m3-on-secondary: #241400;
  --m3-secondary-container: rgba(245, 158, 11, 0.14);
  --m3-on-secondary-container: #FDE68A;

  --m3-on-surface: #F3F4F6;
  --m3-on-surface-variant: #9499A3;
  --m3-outline: rgba(255, 255, 255, 0.14);
  --m3-outline-variant: rgba(255, 255, 255, 0.08);
  --m3-hairline: rgba(255, 255, 255, 0.07);

  --vc-amber-glow: #F59E0B;
  --vc-amber-soft: rgba(245, 158, 11, 0.14);
  --vc-teal-glow: #4CC38A;
  --vc-danger: #F87171;
  --vc-glass-bg: rgba(17, 19, 22, 0.86);
  --vc-card-grad: #13161A;
  --vc-card-hover-grad: #181C21;
  --vc-card-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35);
  --vc-selected-bg: rgba(76, 195, 138, 0.10);
  --vc-selected-border: #4CC38A;
  --vc-selected-shadow: 0 0 0 1.5px #4CC38A, inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  --vc-shell-shadow: 0 28px 80px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --vc-top-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
}

:root {
  /* Deliberate Typographic Contrast: Editorial Serif + Humanist Display + Clean UI Sans + Monospace */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Emil Kowalski Motion Curves (120ms-220ms Snappy Deceleration) */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);

  /* Concentric Radii Scale */
  --radius-outer-lg: 20px;
  --radius-outer-md: 16px;
  --radius-inner-md: 12px;
  --radius-inner-sm: 10px;
  --safe-bottom: env(safe-area-inset-bottom, 16px);
}