/* AURORA V2 — Design Tokens */

:root {
  color-scheme: light;

  /* Canvas / surfaces */
  --f-bg: #f4efe6;
  --f-bg-elevated: #ede6da;
  --f-surface-1: #fffdf8;
  --f-surface: #fbf8f2;
  --f-surface-2: #f3ece0;
  --f-surface-3: #e7dfd2;
  --f-surface-4: #d9cfbf;
  --f-line: rgba(30, 22, 14, 0.10);
  --f-line-strong: rgba(30, 22, 14, 0.18);
  --f-border: #d6ccb9;
  --f-overlay: rgba(23, 17, 12, 0.18);

  /* Shell */
  --f-shell: rgba(20, 15, 11, 0.94);
  --f-shell-line: rgba(255, 248, 238, 0.10);
  --f-shell-ink: #f7efdf;
  --f-shell-muted: rgba(247, 239, 223, 0.62);
  --f-shell-chip: rgba(255, 255, 255, 0.08);
  --f-glass: rgba(255, 252, 247, 0.88);
  --f-glass-blur: 18px;

  /* Ink */
  --f-ink-1: #17120d;
  --f-ink-2: #564c40;
  --f-ink-3: #8c8171;
  --f-ink-on: #fbf7ee;

  /* Accent */
  --f-accent: #b35b33;
  --f-accent-soft: rgba(179, 91, 51, 0.10);
  --f-accent-hover: #954724;
  --f-warm: #7b3b25;
  --f-warm-soft: rgba(123, 59, 37, 0.10);
  --f-warm-hover: #5d2917;

  /* Signals */
  --f-up: #1d6946;
  --f-up-soft: rgba(29, 105, 70, 0.10);
  --f-up-border: rgba(29, 105, 70, 0.25);
  --f-down: #b34b37;
  --f-down-soft: rgba(179, 75, 55, 0.10);
  --f-down-border: rgba(179, 75, 55, 0.22);
  --f-warn: #8d6a2f;
  --f-warn-soft: rgba(141, 106, 47, 0.10);
  --f-warn-border: rgba(141, 106, 47, 0.20);

  /* Focus */
  --f-focus: #b35b33;
  --f-focus-ring: 0 0 0 4px rgba(179, 91, 51, 0.14);

  /* Spacing */
  --f-s1: 4px;
  --f-s2: 8px;
  --f-s3: 12px;
  --f-s4: 16px;
  --f-s5: 24px;
  --f-s6: 32px;
  --f-s7: 48px;
  --f-s8: 64px;
  --f-s9: 96px;
  --f-s10: 128px;

  /* Radius */
  --f-r-sm: 6px;
  --f-r-md: 12px;
  --f-r-lg: 18px;
  --f-r-xl: 24px;
  --f-r-pill: 999px;

  /* Shadows */
  --f-shadow-0: none;
  --f-shadow-1: 0 1px 2px rgba(28, 21, 14, 0.04), 0 8px 24px rgba(28, 21, 14, 0.04);
  --f-shadow-2: 0 6px 20px rgba(28, 21, 14, 0.06), 0 18px 50px rgba(28, 21, 14, 0.05);
  --f-shadow-3: 0 18px 48px rgba(28, 21, 14, 0.08), 0 30px 72px rgba(28, 21, 14, 0.06);
  --f-shadow-4: 0 28px 80px rgba(21, 17, 13, 0.16);
  --f-shadow-hover: 0 10px 24px rgba(28, 21, 14, 0.08), 0 22px 48px rgba(28, 21, 14, 0.08);

  /* Layout */
  --f-top-h: 76px;
  --f-tab-h: 62px;
  --f-main-max: 1440px;
  --f-gutter: clamp(18px, 3vw, 40px);

  /* Motion */
  --f-dur-fast: 140ms;
  --f-dur-base: 220ms;
  --f-dur-slow: 360ms;
  --f-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --f-spring: cubic-bezier(0.25, 1, 0.3, 1);

  /* Typography */
  --f-font-ui: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-font-display: 'Fraunces', 'Iowan Old Style', 'Times New Roman', serif;
  --f-font-num: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  --f-font-cjk: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;

  --f-text-xs: 11px;
  --f-text-sm: 13px;
  --f-text-base: 15px;
  --f-text-lg: 18px;
  --f-text-xl: 24px;
  --f-text-2xl: 32px;
  --f-text-3xl: 44px;
  --f-text-hero: clamp(48px, 7vw, 92px);

  --f-leading-tight: 1.02;
  --f-leading-snug: 1.28;
  --f-leading-base: 1.58;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --f-dur-fast: 1ms;
    --f-dur-base: 1ms;
    --f-dur-slow: 1ms;
  }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}