/* ──────────────────────────────────────────────────────────────────────────────
 * AllocLab UI v5 — Design Tokens
 *
 * K 拍板 (2026-04-25): v5 dark-first（與既有 §6 light-first 不衝突，§6 加註腳）。
 * 來源：K 提供的 /stock/2330 standalone HTML 設計稿、加 WCAG 2.1 AA 修正。
 *
 * A11y 修正（plan §A11y Baseline）：
 *   --al-ink-muted: #6a6a6a → #7d7d7d (3.58:1 → 4.51:1, WCAG 1.4.3)
 *   --al-border:    .08    → .18      (1.21:1 → 3.06:1, WCAG 1.4.11)
 *   --al-border-md: .16    → .32      (1.69:1 → 4.5:1,  WCAG 1.4.11)
 * ────────────────────────────────────────────────────────────────────────────── */

:root {
  /* Surface（dark-first） */
  --al-bg: #0a0a0a;
  --al-surface: #151515;
  --al-surface-2: #1c1c1c;
  --al-paper: #202020;

  /* Ink（文字 4 階） */
  --al-ink: #f0f0f0;          /* 17.6:1 — body / heading */
  --al-ink-2: #a8a8a8;        /* 8.84:1 — secondary */
  --al-ink-muted: #7d7d7d;    /* 4.51:1 — meta / caption */
  --al-ink-deep: #ffffff;     /* hero 高強調 */

  /* Border（結構 vs 裝飾） */
  --al-border: rgba(255, 255, 255, 0.18);     /* 結構性，WCAG 1.4.11 過 3:1 */
  --al-border-md: rgba(255, 255, 255, 0.32);  /* 強分隔 */
  --al-border-soft: rgba(255, 255, 255, 0.08); /* 純裝飾允許 */

  /* Accent (Polaris 橘) */
  --al-accent: #d97757;
  --al-accent-2: #c4644a;
  --al-active-bg: rgba(217, 119, 87, 0.14);

  /* 漲跌（台股紅漲綠跌、dark mode 微亮版） */
  --al-up: #e55947;
  --al-up-bg: rgba(229, 89, 71, 0.12);
  --al-dn: #3da576;
  --al-dn-bg: rgba(61, 165, 118, 0.12);

  /* Severity（非方向性，固定色） */
  --al-warn: #f0b132;
  --al-error: #b83232;

  /* Spacing scale (8pt) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --pad-x: 16px;
  --gap-card: 12px;

  /* Radius */
  --radius-card: 12px;
  --radius-inner: 8px;
  --radius-pill: 999px;
  --radius-chip: 6px;

  /* Fixed heights (sticky regions) */
  --header-h: 56px;       /* dashboard / list pages */
  --header-h-stock: 166px; /* /stock/{id} hero with price + AI */
  --tabs-h: 48px;
  --action-h: 52px;     /* shrunk from 68px — K 回報 action bar 太擋 */
  --app-nav-h: 56px;    /* shrunk from 64px — 同步調 */

  /* Z-index */
  --z-sticky: 200;
  --z-app-nav: 210;
  --z-modal: 300;
  --z-toast: 400;

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Light theme override（§6 守台股紅漲綠跌 light 規則） */
[data-theme="light"] {
  --al-bg: #ffffff;
  --al-surface: #f7f7f5;
  --al-surface-2: #efeeec;
  --al-paper: #ffffff;

  --al-ink: #1a1a1a;
  --al-ink-2: #555555;
  --al-ink-muted: #767676; /* 4.54:1 on #fff */
  --al-ink-deep: #000000;

  --al-border: rgba(0, 0, 0, 0.18);
  --al-border-md: rgba(0, 0, 0, 0.32);
  --al-border-soft: rgba(0, 0, 0, 0.08);

  /* §6 強制 light theme 漲跌色 */
  --al-up: #c0392b;
  --al-up-bg: rgba(192, 57, 43, 0.10);
  --al-dn: #2a7a50;
  --al-dn-bg: rgba(42, 122, 80, 0.10);
}

/* A11y utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--al-accent);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}