/* Favuus — design tokens v1 (Bee2ez). Source of truth: Claude Design project "Favuus Design System".
   Do not edit values here without updating the design; components only reference these variables. */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #F7F5F1;
  --sidebar: #EFECE6;
  --chrome: #EFECE6;
  --surface: #FFFEFC;
  --surface-2: #F3F0EA;
  --surface-hover: #EDE9E2;
  --border: #E4DFD6;
  --border-strong: #D3CCC0;
  --text: #1E1A15;
  --text-2: #615A50;
  --text-3: #8A8276;            /* disabled / decorative only */
  --accent: #E9A23B;             /* honey */
  --accent-hover: #DD942A;
  --accent-ink: #2B1D06;         /* text on --accent */
  --accent-text: #8F5A06;        /* honey as text/link, AA */
  --accent-soft: #FBEFD9;
  --accent-border: #EBC98A;
  --focus: #B8740A;
  --success: #2F7D4F;
  --success-soft: #E3F1E8;
  --on-success: #FFFFFF;
  --info: #2F6690;
  --info-soft: #E2EDF5;
  --danger: #B83A2E;
  --danger-soft: #F9E5E2;
  --on-danger: #FFFFFF;
  --overlay: rgba(30, 24, 16, .32);
  --shadow-1: 0 1px 2px rgba(40, 30, 15, .06);
  --shadow-2: 0 4px 14px rgba(40, 30, 15, .08), 0 1px 2px rgba(40, 30, 15, .06);
  --shadow-window: 0 12px 32px rgba(40, 30, 15, .10), 0 1px 3px rgba(40, 30, 15, .08);
  --shadow-modal: 0 16px 40px rgba(40, 30, 15, .16), 0 1px 3px rgba(40, 30, 15, .08);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171512;
  --sidebar: #1C1915;
  --chrome: #1C1915;
  --surface: #211E1A;
  --surface-2: #2A2621;
  --surface-hover: #302B25;
  --border: #34302A;
  --border-strong: #45403A;
  --text: #F1ECE4;
  --text-2: #ABA295;
  --text-3: #7A7266;
  --accent: #F0AE48;
  --accent-hover: #F5BC62;
  --accent-ink: #241804;
  --accent-text: #F3BA5E;
  --accent-soft: #3A2C14;
  --accent-border: #6B5023;
  --focus: #F3BA5E;
  --success: #5CC48A;
  --success-soft: #1D3426;
  --on-success: #0E1A12;
  --info: #74AEDC;
  --info-soft: #1B2C3A;
  --danger: #F07A6C;
  --danger-soft: #3C201C;
  --on-danger: #2A0D09;
  --overlay: rgba(0, 0, 0, .5);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .03);
  --shadow-window: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .03);
  --shadow-modal: 0 20px 48px rgba(0, 0, 0, .55);
}

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-15: 15px; --fs-20: 20px; --fs-28: 28px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px;
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* State animations */
@keyframes fv-bar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@keyframes fv-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes fv-spin { to { transform: rotate(360deg); } }
@keyframes fv-scan { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes fv-ping { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes fv-breathe { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.08); opacity: .2; } }
@keyframes fv-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fv-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes fv-rec { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Reduced motion: shapes stay distinct, they just stop moving */
@media (prefers-reduced-motion: reduce) { [data-anim] { animation: none !important; } * { transition: none !important; } }
[data-reduce-motion="true"] [data-anim] { animation: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }