/* ============================================================
   Forge — Design Tokens
   Foundation: Color / Typography / Spacing / Radius / Elevation / Motion
   ============================================================ */

:root {
  /* ---- Typography ---- */
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Consolas,
    "Liberation Mono", Menlo, monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 27px;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-base: 1.65;

  --tracking-tight: -0.021em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;
  --r-full: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 380ms;

  /* ---- Layout ---- */
  --topbar-h: 56px;
  --rail-w: 236px;
  --preview-w: 520px;
}

/* ============================================================
   Light theme (default)
   ============================================================ */
:root,
[data-theme="light"] {
  --bg: #f6f6f3;
  --bg-soft: #efefea;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-sunken: #f1f1ec;

  --border: #e2e2db;
  --border-soft: #ececE6;
  --border-strong: #cbcbc1;

  --text: #1a1a18;
  --text-2: #56564f;
  --text-3: #8b8b81;
  --text-inverse: #ffffff;

  --accent: #0e6f5c;
  --accent-hover: #0b5a4a;
  --accent-soft: #e4f2ee;
  --accent-border: #b6ddd2;
  --accent-text: #0a5445;

  --warn: #8a5a10;
  --warn-soft: #fbf0dc;
  --warn-border: #ecd6ae;

  --danger: #9a3324;
  --danger-soft: #fbeae7;
  --danger-border: #eec9c1;

  --shadow-sm: 0 1px 2px rgba(24, 24, 20, 0.05);
  --shadow-md: 0 2px 6px rgba(24, 24, 20, 0.06), 0 1px 2px rgba(24, 24, 20, 0.04);
  --shadow-lg: 0 12px 32px rgba(24, 24, 20, 0.1), 0 2px 8px rgba(24, 24, 20, 0.05);

  --focus-ring: 0 0 0 3px rgba(14, 111, 92, 0.22);
  --preview-bg: #fbfbf9;
}

/* ============================================================
   Dark theme
   ============================================================ */
[data-theme="dark"] {
  --bg: #131412;
  --bg-soft: #0e0f0d;
  --surface: #1c1d1a;
  --surface-2: #222420;
  --surface-sunken: #191a17;

  --border: #2f312c;
  --border-soft: #262824;
  --border-strong: #45473f;

  --text: #ececea;
  --text-2: #a8a8a1;
  --text-3: #75756e;
  --text-inverse: #131412;

  --accent: #4ecfa8;
  --accent-hover: #6bdcb8;
  --accent-soft: #16302a;
  --accent-border: #265947;
  --accent-text: #7fe0c0;

  --warn: #e0a952;
  --warn-soft: #2e2415;
  --warn-border: #4a3a1c;

  --danger: #e88b7d;
  --danger-soft: #2e1b17;
  --danger-border: #54291f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

  --focus-ring: 0 0 0 3px rgba(78, 207, 168, 0.25);
  --preview-bg: #161715;
}

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