/* ==========================================================================
   tokens.css — Olvara design tokens（唯一數值來源，對照 docs/design-tokens.md）
   規則：呢個檔只准 CSS variables，唔准 selector。
   所有 component 數值（顏色/間格/字體/圓角/陰影/動畫 easing）一律引用呢度。
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- 底色 / 面 ---- */
  --bg: #edf0ec;              /* app 背景（topbar 底都係佢） */
  --surface: #fbfcfa;         /* 卡面 / search / btn / input */
  --surface-2: #f3f5f1;       /* 次層面（input 底、hover row 底） */
  --raised: #fdfefc;          /* 浮層（modal / drawer / pop） */
  --well: #14201b0e;          /* 凹槽底：kbd、meter 軌、menu hover */
  --line: #14201b14;          /* 一般邊線 */
  --line-2: #14201b26;        /* 深一級邊線（btn / chip / input border） */

  /* ---- 文字 ---- */
  --text: #16201b;
  --muted: #59645e;
  --faint: #6c7771;
  --mono-ink: #16201b;

  /* ---- 品牌 / 強調 ---- */
  --primary: #255446;
  --on-primary: #f2f6f3;
  --amber: #9c5c16;
  --amber-fill: #d39447;

  /* ---- Sidebar（深綠欄） ---- */
  --side: #15241f;
  --on-side: #e9eee9;
  --side-dim: #e9eee9a3;      /* 非活躍文字 64% */
  --side-hover: #ffffff12;    /* hover pill 底 7% */
  --side-pill: #ebdfc6;       /* 活躍 pill / brand mark 底（米杏色） */
  --on-side-pill: #15241f;

  /* ---- 深色卡（ink card） ---- */
  --ink-card: #15241f;
  --on-ink: #eef2ee;
  --ink-dim: #eef2eea8;

  /* ---- 狀態色 ---- */
  --good: #2a7349;
  --warn: #8f5a00;
  --bad: #b23a2a;
  --info: #2c5f9e;
  --soft: 14%;                /* pill/badge tone 色透明百分比（color-mix 用） */

  /* ---- 分類色（chart / swatch / legend） ---- */
  --c-serums: #2f6b58;
  --c-oils: #c98a3c;
  --c-cleansers: #4f86bd;
  --c-balms: #bf6f55;
  --c-body: #8f9a4c;
  --c-home: #7a8783;

  /* ---- KPI 瓷磚色 ---- */
  --tile-sage: #dbe8dd;
  --tile-apricot: #f5e3ca;
  --tile-mist: #dce6ef;
  --tile-clay: #f1ddd3;
  --on-tile: #16201b;
  --tile-dim: #16201ba8;

  /* ---- 陰影 ---- */
  --shadow: 0 1px 2px #14201b0a, 0 18px 40px -28px #14282047;
  --shadow-pop: 0 26px 60px -20px #101c1652, 0 2px 8px #101c1614;
  --shadow-side: 0 24px 50px -30px #0a18128c;   /* sidebar panel（dark 見下） */

  /* ---- 間格 / 版面 ---- */
  --gap: 16px;
  --gutter: clamp(16px, 1.8vw, 28px);
  --side-w: 252px;
  --side-w-rail: 88px;
  --app-max: 1760px;

  /* ---- 字體 ---- */
  --font: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-base: 14px;
  --fs-lg: 15px;
  --fs-xl: 17px;
  --fs-2xl: 20px;
  --fs-3xl: 22px;
  --fs-4xl: 26px;
  --fs-display: 34px;
  --fs-title: clamp(28px, 2.6vw, 38px);   /* .head__title */

  /* ---- 圓角 ---- */
  --r-card: 22px;
  --r-tile: 16px;
  --r-ctl: 12px;
  --r-side-panel: 26px;
  --r-brand: 13px;
  --r-nav-item: 14px;
  --r-nav-sub: 10px;
  --r-search: 23px;
  --r-btn: 21px;
  --r-btn-sm: 17px;
  --r-pill: 12px;
  --r-meter: 3px;
  --r-pop: 16px;

  /* ---- 選取 / 高亮 ---- */
  --selection: color-mix(in srgb, var(--amber-fill) 40%, transparent);
  --mark-bg: color-mix(in srgb, var(--amber-fill) 38%, transparent);
  --backdrop: #0a120e61;      /* dialog::backdrop（dark：#0000008c） */

  /* ---- Placeholder gradients（唔用外連圖片） ---- */
  --grad-avatar: linear-gradient(135deg, #d9b47f 0%, #a5814f 55%, #6f5636 100%);
  --grad-thumb: linear-gradient(135deg, #e7ecdf 0%, #c4cfbc 55%, #9fb09a 100%);

  /* ---- 動畫 easing（GSAP 等效曲線） ---- */
  --ease: cubic-bezier(.2, .8, .2, 1);             /* CSS flash 用 */
  --ease-power3-out: cubic-bezier(.165, .84, .44, 1);
  --ease-power3-inout: cubic-bezier(.65, .05, .36, 1);
  --ease-power4-out: cubic-bezier(.25, 1, .5, 1);  /* 標題逐字 */
  --ease-power2-in: cubic-bezier(.55, .06, .68, .19);
  --ease-back: cubic-bezier(.34, 1.8, .64, 1);     /* back.out(3) 近似 */
  --ease-theme: cubic-bezier(.65, 0, .35, 1);      /* theme circle reveal 專用 */
}

/* ---- Dark theme 覆蓋（對照 design-tokens.md §1b） ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1211;
  --surface: #161c1a;
  --surface-2: #1c2321;
  --raised: #212926;
  --well: #ffffff0e;
  --line: #ffffff13;
  --line-2: #ffffff26;

  --text: #e7ece8;
  --muted: #a0aaa4;
  --faint: #8b9690;
  --mono-ink: #16201b;

  --primary: #8cc6ad;
  --on-primary: #0d1f18;
  --amber: #e6ad66;
  --amber-fill: #d9a058;

  --side: #121916;
  --on-side: #e7ece8;
  --side-dim: #e7ece89e;
  --side-hover: #ffffff0f;
  --side-pill: #e6d9bd;
  --on-side-pill: #15241f;

  --ink-card: #1b2b25;
  --on-ink: #eef2ee;
  --ink-dim: #eef2eea8;

  --good: #7fd09f;
  --warn: #e9b765;
  --bad: #f29b8c;
  --info: #96bff0;
  --soft: 17%;

  --c-serums: #79c0a3;
  --c-oils: #e2aa62;
  --c-cleansers: #86b4e4;
  --c-balms: #e39a82;
  --c-body: #bcc57c;
  --c-home: #a6b2ae;

  --tile-sage: #1c3027;
  --tile-apricot: #382a17;
  --tile-mist: #1a2734;
  --tile-clay: #35231e;
  --on-tile: #eef2ee;
  --tile-dim: #eef2eeb3;

  --shadow: 0 1px 0 #ffffff08 inset, 0 18px 40px -26px #000000d9;
  --shadow-pop: 0 26px 60px -18px #000c, 0 0 0 1px #ffffff14;
  --shadow-side: 0 0 0 1px #ffffff0f, 0 24px 50px -30px #000000e6;

  --backdrop: #0000008c;

  /* dark 底下 placeholder 要深一級先睇得到 */
  --grad-avatar: linear-gradient(135deg, #8a6f4e 0%, #5d4a33 60%, #3a2e20 100%);
  --grad-thumb: linear-gradient(135deg, #2a332e 0%, #1e2622 60%, #17201b 100%);
}