/* ============================================================
   設計系統 Design tokens — 顏色、字型、深淺主題
   改配色只需要動這個檔案
   ============================================================ */

:root{
  --ink:        #14130e;
  --ink-soft:   #1c1b14;
  --ink-elev:   #24221a;
  --paper:      #f2efe3;
  --paper-dim:  #ada896;
  --amber:      #e8a33d;
  --amber-soft: #f2c072;
  --tape:       #7fa88f;
  --line:       rgba(242,239,227,0.11);
  --line-strong:rgba(242,239,227,0.20);
  --modal-bg:   #1a1912;
  --glass:      rgba(32,30,22,0.55);
  --glass-line: rgba(242,239,227,0.12);

  /* role-tag palette — lower saturation, green→yellow→orange→red→blue, others muted grey. */
  --tag-green-bg:#33463a;   --tag-green-fg:#b6d4b0;
  --tag-yellow-bg:#4a4526;  --tag-yellow-fg:#ddca85;
  --tag-orange-bg:#4e3a26;  --tag-orange-fg:#dca87e;
  --tag-red-bg:#4a2f2c;     --tag-red-fg:#d69b91;
  --tag-blue-bg:#2c3a4e;    --tag-blue-fg:#9db6d0;
  --tag-grey-bg:#33312a;    --tag-grey-fg:#96917f;

  --display: 'Fraunces', serif;
  --body:    'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --brand:   'Montserrat', 'Inter', sans-serif;
  --nav-w: 232px;
}
/* ------------------------------------------------------------
   亮色主題 Light theme
   數值不是憑感覺挑的，是照著深色主題的「對比關係」反推的
   （WCAG 相對亮度，色階有做 sRGB 線性化）：

     項目            深色（卡片上）   亮色（卡片上）
     主文字 paper        15.26           13.95
     次要 paper-dim       7.38            7.37   ← 刻意對齊
     階層比 paper/dim     2.07            1.89

   關鍵發現：之前背景 #f0ebdd 亮度已接近純白，卡片只比它亮 0.011，
   兩者糊在一起 → 整體就顯得「太淺、沒設計感」。深色主題的卡片是比
   背景亮 +0.024 才浮得起來。現在背景壓到真正的羊皮紙 #e6dfc9，
   glass 調到讓卡片同樣浮起 +0.024，層次就回來了。

   強調色沒有硬套深色的對比值（8.15）——那會把琥珀逼成深咖啡、
   鼠尾草逼成近乎黑綠，彩度全失、品牌識別消失。改成在通過 AA(4.5)
   的前提下保留最多彩度：amber 對比 5.26／彩度 0.53，tape 對比 5.00。
   ------------------------------------------------------------ */
html[data-theme="light"]{
  --ink:        #e6dfc9;   /* 羊皮紙底，不是白紙 */
  --ink-soft:   #ded6bf;
  --ink-elev:   #d4cbb1;
  --paper:      #1c1911;   /* 對比 13.95，暖調近黑而非死黑 */
  --paper-dim:  #4b473c;   /* 對比 7.37，跟深色的 7.38 對齊 */
  --amber:      #8a4e04;   /* 對比 5.26，彩度 0.53，仍是金琥珀 */
  --amber-soft: #744003;
  --tape:       #44684e;   /* 對比 5.00，保留原本的鼠尾草綠 */
  --line:       rgba(28,25,17,0.16);
  --line-strong:rgba(28,25,17,0.27);
  --modal-bg:   #efe9d8;
  --glass:      rgba(240,235,222,0.5);   /* 讓卡片浮起 +0.024，與深色一致 */
  --glass-line: rgba(28,25,17,0.14);

  /* light-mode tags: readable ink text on soft tints */
  --tag-green-bg:#cfe0c5;   --tag-green-fg:#324a36;
  --tag-yellow-bg:#e8daa9;  --tag-yellow-fg:#645517;
  --tag-orange-bg:#e8cba7;  --tag-orange-fg:#743f16;
  --tag-red-bg:#e8c0b4;     --tag-red-fg:#833022;
  --tag-blue-bg:#bfd0e0;    --tag-blue-fg:#24405c;
  --tag-grey-bg:#dcd6c7;    --tag-grey-fg:#524e3f;
}

/* 亮色：背景圖的透明度設在容器上，不要跟 .section-bg 的 .16 相乘
   （相乘後只剩 1.6%，等於看不見）。深色照片壓在紙上要加暖調、提亮，
   否則會變成髒灰的一塊。底色壓深後，圖可以再濃一點。 */
html[data-theme="light"] .section-bg{ opacity:.17; }
html[data-theme="light"] .section-bg img{ filter:grayscale(.4) sepia(.32) blur(3px) contrast(.92) brightness(1.06); }
html[data-theme="light"] .hero-portrait img{ filter:grayscale(.08) contrast(1.02) saturate(.96); }
/* 亮色底不要是一片平的紙：左上打一道極淡的暖光，四周稍微壓深，做出縱深 */
html[data-theme="light"] body{
  background-image:
    radial-gradient(circle at 12% 6%, rgba(138,78,4,0.07), transparent 42%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(28,25,17,0.06), transparent 60%);
  background-attachment:fixed;
}