/* ================================================================
   Jackle Blog — Design Tokens
   來源：https://jackle.pro 線上渲染 CSS（Tailwind v4 + shadcn）
   ================================================================ */
:root {
  /* ---------- 字體 ---------- */
  --font-sans: "Noto Sans TC", "Noto Sans TC Fallback", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  --body-letter-spacing: 0.025rem;   /* body 全站字距，不是 em 是 rem */

  /* ---------- 間距基準：所有間距 = 這個值 × N ---------- */
  --spacing: 0.25rem;
  /* 常用：1=.25rem 2=.5rem 3=.75rem 4=1rem 6=1.5rem 8=2rem
           10=2.5rem 12=3rem 16=4rem 20=5rem 24=6rem 28=7rem 36=9rem */

  /* ---------- 容器寬度 ---------- */
  --container-xs: 20rem;  --container-sm: 24rem;  --container-md: 28rem;
  --container-lg: 32rem;  --container-xl: 36rem;  --container-2xl: 42rem;
  --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem;
  --container-6xl: 72rem; --container-7xl: 80rem;
  /* 外殼只用三個：7xl=80rem 外框、2xl=42rem 內文欄、5xl=64rem 大螢幕內文欄 */

  /* ---------- 字級階梯（size / line-height 成對） ---------- */
  --text-xs: 0.75rem;   --text-xs--line-height: 1.33333;
  --text-sm: 0.875rem;  --text-sm--line-height: 1.42857;
  --text-base: 1rem;    --text-base--line-height: 1.5;
  --text-lg: 1.125rem;  --text-lg--line-height: 1.55556;
  --text-xl: 1.25rem;   --text-xl--line-height: 1.4;
  --text-2xl: 1.5rem;   --text-2xl--line-height: 1.33333;
  --text-3xl: 1.875rem; --text-3xl--line-height: 1.2;
  --text-4xl: 2.25rem;  --text-4xl--line-height: 1.11111;
  --text-5xl: 3rem;     --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;  --text-6xl--line-height: 1;

  /* ---------- 字重 / 字距 / 行高 ---------- */
  --font-weight-normal: 400;   --font-weight-medium: 500;
  --font-weight-semibold: 600; --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --tracking-tight: -0.025em;  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;    --tracking-widest: 0.1em;
  --leading-tight: 1.25; --leading-relaxed: 1.625; --leading-loose: 2;

  /* ---------- 圓角 ---------- */
  --radius: 0.625rem;                     /* 10px，rounded-lg */
  --radius-xs: 0.125rem;                  /* 2px */
  --radius-sm: calc(var(--radius) - 4px); /* 6px */
  --radius-md: calc(var(--radius) - 2px); /* 8px，下拉選單面板 */
  --radius-lg: var(--radius);             /* 10px */
  --radius-xl: calc(var(--radius) + 4px); /* 14px */
  --radius-2xl: 1rem;                     /* 16px */
  --radius-3xl: 1.5rem;                   /* 24px，手機選單面板 */
  --radius-full: 9999px;                  /* 導覽膠囊、切換鈕（原始值是 3.40282e38px） */

  /* ---------- 陰影 ---------- */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
  /* 頁首膠囊的實際複合值 = ring-1 ring-zinc-900/5 + shadow-lg shadow-zinc-800/5 */
  --shadow-nav-pill: 0 0 0 1px #18181b0d,
                     0 10px 15px -3px #27272a0d,
                     0 4px 6px -4px #27272a0d;

  /* ---------- 動效 ---------- */
  --default-transition-duration: 0.15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --duration-theme: 0.5s;              /* 底層背景切色 duration-500 */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --blur-sm: 8px; --blur-2xl: 40px; --blur-3xl: 64px;
  --backdrop-blur: 8px;                /* backdrop-blur（無後綴）= 8px */

  /* ---------- 調色盤（生產環境是 oklch；hex 為近似） ---------- */
  --color-white: #fff;
  --color-black: #000;
  --color-zinc-50:  oklch(98.5% 0 0);            /* #fafafa */
  --color-zinc-100: oklch(96.7% .001 286.375);   /* #f4f4f5 */
  --color-zinc-200: oklch(92% .004 286.32);      /* #e4e4e7 */
  --color-zinc-300: oklch(87.1% .006 286.286);   /* #d4d4d8 */
  --color-zinc-400: oklch(70.5% .015 286.067);   /* #9f9fa9 */
  --color-zinc-500: oklch(55.2% .016 285.938);   /* #71717b */
  --color-zinc-600: oklch(44.2% .017 285.786);   /* #52525c */
  --color-zinc-700: oklch(37% .013 285.805);     /* #3f3f46 */
  --color-zinc-800: oklch(27.4% .006 286.033);   /* #27272a */
  --color-zinc-900: oklch(21% .006 285.885);     /* #18181b */
  --color-teal-50:  oklch(98.4% .014 180.72);    /* #f0fdfa */
  --color-teal-100: oklch(95.3% .051 180.801);   /* #cbfbf1 */
  --color-teal-200: oklch(91% .096 180.426);     /* #96f7e4 */
  --color-teal-300: oklch(85.5% .138 181.071);   /* #46ecd5 */
  --color-teal-400: oklch(77.7% .152 181.912);   /* #00d5be — 深色模式 hover */
  --color-teal-500: oklch(70.4% .14 182.503);    /* #00bba7 — 品牌強調色 */
  --color-teal-600: oklch(60% .118 184.704);     /* #009689 */
  --color-teal-700: oklch(51.1% .096 186.391);   /* #00786f — 內文連結底線 */
  --color-teal-800: oklch(43.7% .078 188.216);   /* #005f5a */
  --color-teal-900: oklch(38.6% .063 188.416);   /* #0b4f4a */
  --color-gray-50:  oklch(98.5% .002 247.839);   /* #f9fafb — 淺色主容器底 */
  --color-gray-100: oklch(96.7% .003 264.542);   /* #f3f4f6 */
  --color-gray-200: oklch(92.8% .006 264.531);   /* #e5e7eb */
  --color-gray-300: oklch(87.2% .01 258.338);    /* #d1d5dc — 淺色網格線 */
  --color-gray-400: oklch(70.7% .022 261.325);   /* #99a1af */
  --color-gray-500: oklch(55.1% .027 264.364);   /* #6a7282 */
  --color-gray-600: oklch(44.6% .03 256.802);    /* #4a5565 */
  --color-gray-700: oklch(37.3% .034 259.733);   /* #364153 — 深色網格線 */
  --color-gray-800: oklch(27.8% .033 256.848);   /* #1e2939 */
  --color-gray-900: oklch(21% .034 264.665);     /* #101828 */
  --color-gray-950: oklch(13% .028 261.692);     /* #030712 — 程式碼區塊底 */

  /* ---------- shadcn 語意色（淺色） ---------- */
  --background: oklch(100% 0 0);
  --foreground: oklch(14.5% 0 0);
  --card: oklch(100% 0 0);        --card-foreground: oklch(14.5% 0 0);
  --popover: oklch(100% 0 0);     --popover-foreground: oklch(14.5% 0 0);
  --primary: oklch(20.5% 0 0);    --primary-foreground: oklch(98.5% 0 0);
  --secondary: oklch(97% 0 0);    --secondary-foreground: oklch(20.5% 0 0);
  --muted: oklch(97% 0 0);        --muted-foreground: oklch(55.6% 0 0);
  --accent: oklch(97% 0 0);       --accent-foreground: oklch(20.5% 0 0);
  --destructive: oklch(57.7% .245 27.325);
  --destructive-foreground: oklch(57.7% .245 27.325);
  --border: oklch(92.2% 0 0);
  --input: oklch(92.2% 0 0);
  --ring: oklch(70.8% 0 0);
  --chart-1: oklch(64.6% .222 41.116);  --chart-2: oklch(60% .118 184.704);
  --chart-3: oklch(39.8% .07 227.392);  --chart-4: oklch(82.8% .189 84.429);
  --chart-5: oklch(76.9% .188 70.08);

  /* ---------- 外殼專用（淺色）：手刻時直接用這組 ---------- */
  --shell-page-bg:       #fff;                  /* 最外層滿版底 bg-white */
  --shell-panel-bg:      #f9fafb;               /* 內容欄容器 bg-gray-50 */
  --shell-panel-ring:    #f4f4f5;               /* ring-1 ring-zinc-100 */
  --shell-grid-stroke:   #d1d5dc;               /* 網格 stroke-gray-300 */
  --shell-pill-bg:       rgb(255 255 255 / .9); /* bg-white/90 */
  --shell-pill-ring:     #18181b0d;             /* ring-zinc-900/5 */
  --shell-pill-ring-hover: #18181b0d;           /* 淺色無 hover 變化 */
  --shell-pill-text:     #27272a;               /* text-zinc-800 */
  --shell-logo-color:    #3f3f46;               /* text-zinc-700 */
  --shell-icon-muted:    #71717b;               /* text-zinc-500 */
  --shell-footer-border: #f4f4f5;               /* border-zinc-100 */
  --shell-footer-link:   #27272a;               /* text-zinc-800 */
  --shell-footer-copy:   #9f9fa9;               /* text-zinc-400 */
  --shell-link-hover:    #00bba7;               /* hover:text-teal-500 */
  --shell-sheet-bg:      #fff;                  /* 手機選單面板 bg-white */
  --shell-sheet-ring:    #18181b0d;             /* ring-zinc-900/5 */
  --shell-sheet-divide:  #f4f4f5;               /* divide-zinc-100 */
  --shell-scrim:         rgb(39 39 42 / .5);    /* bg-zinc-800/50 */
}

.dark {
  --background: oklch(14.5% 0 0);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(14.5% 0 0);       --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(14.5% 0 0);    --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0);    --primary-foreground: oklch(20.5% 0 0);
  --secondary: oklch(26.9% 0 0);  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(26.9% 0 0);      --muted-foreground: oklch(70.8% 0 0);
  --accent: oklch(26.9% 0 0);     --accent-foreground: oklch(98.5% 0 0);
  --destructive: oklch(39.6% .141 25.723);
  --destructive-foreground: oklch(63.7% .237 25.331);
  --border: oklch(26.9% 0 0);
  --input: oklch(26.9% 0 0);
  --ring: oklch(43.9% 0 0);
  --chart-1: oklch(48.8% .243 264.376);  --chart-2: oklch(69.6% .17 162.48);
  --chart-3: oklch(76.9% .188 70.08);    --chart-4: oklch(62.7% .265 303.9);
  --chart-5: oklch(64.5% .246 16.439);

  --shell-page-bg:       #000;                  /* dark:bg-black */
  --shell-panel-bg:      #18181b;               /* dark:bg-zinc-900 */
  --shell-panel-ring:    #d4d4d833;             /* dark:ring-zinc-300/20 */
  --shell-grid-stroke:   #364153;               /* dark:stroke-gray-700 */
  --shell-pill-bg:       rgb(39 39 42 / .9);    /* dark:bg-zinc-800/90 */
  --shell-pill-ring:     #ffffff1a;             /* dark:ring-white/10 */
  --shell-pill-ring-hover: #ffffff33;           /* dark:hover:ring-white/20 */
  --shell-pill-text:     #e4e4e7;               /* dark:text-zinc-200 */
  --shell-logo-color:    #e4e4e7;               /* dark:text-zinc-200 */
  --shell-icon-muted:    #71717b;
  --shell-footer-border: #3f3f4666;             /* dark:border-zinc-700/40 */
  --shell-footer-link:   #e4e4e7;               /* dark:text-zinc-200 */
  --shell-footer-copy:   #71717b;               /* dark:text-zinc-500 */
  --shell-link-hover:    #00d5be;               /* dark:hover:text-teal-400 */
  --shell-sheet-bg:      #18181b;               /* dark:bg-zinc-900 */
  --shell-sheet-ring:    #27272a;               /* dark:ring-zinc-800 */
  --shell-sheet-divide:  #f4f4f50d;             /* dark:divide-zinc-100/5 */
  --shell-scrim:         rgb(0 0 0 / .7);       /* dark:bg-black/70 */
  --shadow-nav-pill:     0 0 0 1px #ffffff1a,
                         0 10px 15px -3px #27272a0d,
                         0 4px 6px -4px #27272a0d;
}

/* ---------- 全域 base ---------- */
*, *::before, *::after, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; tab-size: 4; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font-sans);
  letter-spacing: var(--body-letter-spacing);
  background-color: var(--background);
  color: var(--foreground);
}
a { color: inherit; text-decoration: inherit; }
img, video { max-width: 100%; height: auto; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
menu, ol, ul { list-style: none; }   /* 注意：Tailwind preflight 清掉了預設項目符號 */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
b, strong { font-weight: bolder; }
table { border-collapse: collapse; }