/* ═══════════════════════════════════════════════
   日日日文 — Design Tokens
   三層架構：Primitive → Semantic → Component
   來源：brand_assets/design guideline.png × 設計原型/landing-page.html（和風留白主題）
═══════════════════════════════════════════════ */

:root {
  /* ── Primitive ── */
  --paper-50:  #f9f3e8;   /* 主背景 — 對齊 hero washi 圖底，全站統一暖紙色 */
  --paper-100: #f1e8d6;   /* 浮起面（卡片）*/
  --paper-200: #e9ddc7;   /* 下沉面 */
  --ink-900:   #1a1410;
  --ink-700:   #3a2f25;
  --ink-500:   #7a6a5a;
  --ink-300:   #b0a090;
  --vermilion-600: #8b3929;
  --vermilion-500: #a34434;
  --vermilion-100: rgba(139, 57, 41, .08);
  --pine-600:  #4a5d4e;
  --pine-100:  rgba(74, 93, 78, .1);
  --ochre-700: #8a6a1f;                 /* 註解第三類「慣用」用色，赭金、和暖紙互補 */
  --ochre-100: rgba(138, 106, 31, .12);

  /* ── Spacing scale（唯一合法間距來源）── */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6rem;

  /* ── Semantic ── */
  --bg:           var(--paper-50);
  --bg-raised:    var(--paper-100);
  --bg-sunken:    var(--paper-200);
  --text:         var(--ink-900);
  --text-soft:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-300);
  --accent:       var(--vermilion-600);
  --accent-hover: var(--vermilion-500);
  --accent-bg:    var(--vermilion-100);
  --ok:           var(--pine-600);
  --ok-bg:        var(--pine-100);
  --set:          var(--ochre-700);     /* 註解分類「慣用」（固定說法／問候套語）*/
  --set-bg:       var(--ochre-100);
  --border:       rgba(26, 20, 16, .09);
  --border-strong: rgba(26, 20, 16, .18);

  /* ── Typography ── */
  --font-display: 'Noto Serif TC', serif;
  --font-body:    'Noto Sans TC', sans-serif;
  --fs-h1: clamp(2.2rem, 4.6vw, 3.6rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3: 1.1rem;
  --fs-body: .95rem;
  --fs-small: .8rem;
  --fs-tiny: .68rem;

  /* ── Component ── */
  --btn-radius: 6px;
  --card-radius: 10px;
  --pill-radius: 999px;
  --nav-h: 60px;
  --focus-ring: 2px solid var(--vermilion-500);
  --shadow-soft: 0 2px 14px rgba(26, 20, 16, .06);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-exit:  cubic-bezier(.7, 0, .84, 0);

  /* ── Motion durations（搭配上面兩條曲線使用）── */
  --dur-fast: .15s;   /* 微互動：hover、active */
  --dur-base: .18s;   /* 一般狀態切換 */
  --dur-slow: .5s;    /* scroll reveal、區塊進場 */
  --stagger: 90ms;    /* 連續元素進場間隔 */

  /* ── 假名／振假名（日文教學專屬）── */
  --fs-kana: .62em;        /* furigana 相對主字 */
  --kana-color: var(--text-muted);
  --lh-jp: 2.0;            /* 日文行高（容納振假名）*/
  --lh-tight: 1.2;         /* 大標 */
  --lh-body: 1.8;          /* 內文 */

  /* ── Z-index 層級（唯一合法來源，禁止裸寫數字）── */
  --z-base: 1;
  --z-tooltip: 80;     /* 文法解釋浮卡（在內容之上、sticky nav 之下）*/
  --z-sticky: 100;     /* sticky nav */
  --z-overlay: 1000;   /* drawer／modal 遮罩 */
  --z-modal: 1001;
  --z-toast: 1100;
  --z-paper: 9999;     /* 紙紋 overlay（最上層、pointer-events:none）*/

  /* ── 觸控與 App 載體 ── */
  --touch-min: 44px;                       /* 觸控目標最小邊長（iOS/Android 規範）*/
  --tap-highlight: transparent;            /* 關閉行動瀏覽器藍色點擊高亮 */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --tabbar-h: 56px;                        /* App 底部導覽列高度 */

  /* ── PWA／App 圖示 ── */
  --pwa-theme:      var(--paper-50);       /* manifest theme_color／瀏覽器網址列 */
  --pwa-background: var(--paper-50);       /* manifest background_color／啟動畫面 */
  --app-icon-bg:    var(--paper-50);       /* 墨圓圖示底色（決策：米色紙底）*/
  --app-icon-radius: 22.37%;               /* iOS squircle 等效圓角（顯示用）*/
  --app-icon-inset:  18%;                  /* enso 四周留白比例，勿小於此值 */
}