/* ==========================================================================
   順坤居官網原型 — 設計 Token
   對應：docs/planning/04-design-system.md
   色彩以 OKLCH 定義（§2.1），並提供 hex fallback 供舊環境降級
   ========================================================================== */

:root {
  /* ── 基底表面 ─────────────────────────────── */
  --color-surface: #f8f5f0;          /* 宣紙白 */
  --color-surface-raised: #efeae3;   /* 米霧 */
  --color-surface-sunken: #e5e0d9;   /* 淺石 */

  /* ── 主色 ────────────────────────────────── */
  --color-primary: #1d3b33;          /* 墨玉綠 */
  --color-primary-deep: #132a24;     /* 深墨玉 */
  --color-primary-soft: #d2e2dc;     /* 淡玉 */

  /* ── 輔色 ────────────────────────────────── */
  --color-ridge: #7c8c9b;            /* 遠山青 */
  --color-ridge-soft: #dce3e9;       /* 霧青 */

  /* ── 強調色（全站佔比 < 1%）──────────────── */
  --color-accent: #bc8b45;           /* 落日金 — 僅填色/圖形 */
  --color-accent-strong: #8a6027;    /* 深金 — 淺底上的文字/圖示 */

  /* ── 文字 ────────────────────────────────── */
  --color-text: #2b2621;             /* 墨 */
  --color-text-muted: #6b6560;       /* 淡墨 */
  --color-text-inverse: #f8f5f0;

  /* ── 線條 ────────────────────────────────── */
  --color-border: #dcd8d2;           /* 石灰 */
  --color-border-strong: #b2ada6;    /* 深石灰 */

  /* ── 狀態 ────────────────────────────────── */
  --color-success: #3c8256;
  --color-warning: #b5822f;
  --color-danger: #b94a3c;

  /* ── 字型 ────────────────────────────────── */
  --font-serif: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif;
  --font-sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-numeric: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── 字級（內文基準 17px — 受眾 30–60 歲）── */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --text-2xl: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
  --text-3xl: clamp(2.125rem, 1.65rem + 2vw, 3rem);
  --text-4xl: clamp(2.625rem, 1.9rem + 3vw, 4rem);
  --text-hero: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);

  /* ── 行高與字距（中文排版）───────────────── */
  --leading-hero: 1.18;
  --leading-heading: 1.35;
  --leading-body: 1.85;
  --leading-tight: 1.55;

  --tracking-hero: 0.005em;
  --tracking-heading: 0.01em;
  --tracking-body: 0.02em;
  --tracking-caption: 0.03em;

  /* ── 行長 ────────────────────────────────── */
  --width-prose: 38em;
  --width-narrow: 28em;
  --width-wide: 72em;
  --width-max: 90rem;

  /* ── 間距（4px 基準）──────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ── 區塊節奏（刻意不等距）────────────────── */
  --section-tight: clamp(3rem, 2rem + 3vw, 5rem);
  --section-normal: clamp(5rem, 3rem + 6vw, 9rem);
  --section-spacious: clamp(7rem, 4rem + 10vw, 14rem);

  /* ── 圓角（刻意不統一）────────────────────── */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 999px;

  /* ── 陰影（暖色調，非純黑）────────────────── */
  --shadow-xs: 0 1px 2px rgba(43, 38, 33, 0.04);
  --shadow-sm: 0 2px 8px -2px rgba(43, 38, 33, 0.06);
  --shadow-md: 0 8px 24px -6px rgba(43, 38, 33, 0.09);
  --shadow-lg: 0 20px 56px -16px rgba(43, 38, 33, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ── 動態 ────────────────────────────────── */
  --duration-instant: 100ms;
  --duration-fast: 180ms;
  --duration-normal: 320ms;
  --duration-slow: 620ms;
  --duration-reveal: 900ms;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── 版面 ────────────────────────────────── */
  --header-height: 76px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
}

/* OKLCH 原生定義 — 支援的瀏覽器覆寫上方 fallback，確保跨色相感知亮度一致 */
@supports (color: oklch(50% 0.1 100)) {
  :root {
    --color-surface: oklch(97.5% 0.006 85);
    --color-surface-raised: oklch(94.5% 0.008 85);
    --color-surface-sunken: oklch(91% 0.008 85);

    --color-primary: oklch(32% 0.045 165);
    --color-primary-deep: oklch(24% 0.038 165);
    --color-primary-soft: oklch(88% 0.02 165);

    --color-ridge: oklch(62% 0.028 220);
    --color-ridge-soft: oklch(90% 0.014 220);

    --color-accent: oklch(66% 0.115 72);
    --color-accent-strong: oklch(50% 0.098 68);

    --color-text: oklch(23% 0.012 60);
    --color-text-muted: oklch(48% 0.01 60);
    --color-text-inverse: oklch(97.5% 0.006 85);

    --color-border: oklch(88% 0.006 85);
    --color-border-strong: oklch(72% 0.008 85);

    --color-success: oklch(52% 0.09 155);
    --color-warning: oklch(62% 0.12 78);
    --color-danger: oklch(53% 0.15 27);

    --shadow-xs: 0 1px 2px oklch(23% 0.012 60 / 0.04);
    --shadow-sm: 0 2px 8px -2px oklch(23% 0.012 60 / 0.06);
    --shadow-md: 0 8px 24px -6px oklch(23% 0.012 60 / 0.09);
    --shadow-lg: 0 20px 56px -16px oklch(23% 0.012 60 / 0.14);
  }
}

/* 深色模式刻意不提供（見 04-design-system.md §1.4）
   唯一深色使用為首頁結尾轉換區的深墨玉底 */