/* ============================================================
   BuyAI · buy.bigwhale.asia
   Design tokens — 對齊 ofox.io 的真實 token 系統
   色票、字體、邊框階全部取自 ofox.io 實際 CSS，非目測。
   ============================================================ */

:root {
  /* ---------- 中性階：ash（暖灰）---------- */
  --ash-100: #fafafa;
  --ash-200: #f4f4f4;
  --ash-300: #ebebeb;
  --ash-400: #e0e0e0;
  --ash-500: #8f8f8f;
  --ash-600: #6b6b6b;
  --ash-700: #4a4a4a;
  --ash-900: #1f1f1f;

  /* ---------- 墨階（深色主題用）---------- */
  --ink-600: #26262b;
  --ink-700: #1a1a1e;
  --ink-800: #121215;
  --ink-900: #08080a;

  /* ---------- 強調色 ---------- */
  --accent-rgb: 255 80 0;
  --accent: rgb(var(--accent-rgb));
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 16%);
  --accent-light: color-mix(in oklab, var(--accent), white 22%);
  --accent-dark: color-mix(in oklab, var(--accent), black 12%);
  --accent-muted: rgb(var(--accent-rgb) / .12);
  --accent-border: rgb(var(--accent-rgb) / .4);

  /* ---------- 次要色 ---------- */
  --sand: #c4b8aa;
  --sand-light: #d4cabe;
  --sand-dark: #b0a294;
  --sage: #9db8af;

  /* ---------- 語意色（淺色為預設）---------- */
  --color-background: var(--ash-200);
  --color-background-card: var(--ash-100);
  --color-background-dark: #191a1b;
  --color-background-darker: #131314;
  --color-foreground: var(--ash-900);
  --color-foreground-muted: var(--ash-700);
  --color-foreground-subtle: #5f5f5f;
  --color-foreground-faint: #6b6b6b;   /* ofox 用 ash-500(3.1:1)，此處加深以達 AA */
  --color-foreground-translucent: #000c;
  --accent-text: #c43d00;              /* 淺底小字用的橘紅，5.0:1 */
  --color-border: #1f1f201a;
  --color-border-light: #1f1f200f;
  --color-border-medium: #1f1f2026;
  --color-border-strong: #1f1f2038;

  /* ---------- 字體 ---------- */
  --font-inter: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-space-grotesk: "Space Grotesk", var(--font-inter);
  --font-jetbrains-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --font-source-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --font-sans: var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: var(--font-space-grotesk), var(--font-sans);
  --font-mono: var(--font-jetbrains-mono), "SF Mono", Consolas, monospace;
  --font-serif: var(--font-source-serif), Georgia, "Times New Roman", serif;

  /* ---------- 字階 ---------- */
  --step--2: clamp(.72rem, .70rem + .08vw, .78rem);
  --step--1: clamp(.84rem, .81rem + .12vw, .92rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.13rem + .34vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.36rem + .70vw, 1.90rem);
  --step-3:  clamp(1.88rem, 1.63rem + 1.22vw, 2.50rem);
  --step-4:  clamp(2.34rem, 1.95rem + 1.96vw, 3.30rem);
  --step-5:  clamp(2.93rem, 2.30rem + 3.10vw, 4.30rem);
  --step-6:  clamp(3.66rem, 2.70rem + 4.80vw, 5.60rem);

  /* ---------- 間距 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 140px;

  /* ---------- 圓角 ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---------- 陰影 ---------- */
  --shadow-1: 0 1px 2px rgba(31, 31, 31, .05);
  --shadow-2: 0 8px 24px rgba(31, 31, 31, .07);
  --shadow-3: 0 24px 60px rgba(31, 31, 31, .12);

  /* ---------- 動效 ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* ---------- 版面 ---------- */
  --container: 1200px;
  --gutter: 24px;
  --marquee-dur: 30s;
  --gc-dur: 64s;
}

/* ---------- 深色主題 ---------- */
.dark {
  --color-background: var(--ink-900);
  --color-background-card: var(--ink-800);
  --color-foreground: var(--ash-100);
  --color-foreground-muted: #b6b5b2;
  --color-foreground-subtle: #a3a3a1;
  --color-foreground-faint: #8f8f8f;
  --accent-text: #ff7a35;
  --color-foreground-translucent: #fffc;
  --color-border: #ffffff12;
  --color-border-light: #ffffff12;
  --color-border-medium: #ffffff2e;
  --color-border-strong: #ffffff47;
  --accent-light: color-mix(in oklab, var(--accent), white 12%);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .34);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, .42);
  --shadow-3: 0 28px 64px rgba(0, 0, 0, .52);
}

@media (min-width: 900px) {
  :root { --gutter: 40px; }
}