/* ==========================================================================
   better-webui · design tokens
   Single source of truth for color, glass, elevation, radius and motion.

   Theme switch contract:
     - toggled by adding class="dark" and/or data-theme="dark" on <html>
     - both are kept in sync so third-party components (which usually look for
       one of the two) keep working
     - never hardcode a raw hex in a component; always consume these vars
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- surfaces ------------------------------------------------------- */
  --bw-bg: #f2f0ea;
  --bw-surface: #f8f6f1;
  --bw-surface-raised: #fdfcf8;
  --bw-surface-sunken: #e9e6dd;
  --bw-border: rgba(28, 28, 25, 0.11);
  --bw-border-strong: rgba(28, 28, 25, 0.26);

  /* ---- text ----------------------------------------------------------- */
  --bw-text: #1c1c19;
  --bw-text-secondary: #57564e;
  --bw-text-muted: #6f6d64;
  --bw-text-inverse: #f7f5ef;

  /* ---- accent: celadon glaze ------------------------------------------ */
  --bw-accent: #2f5f5a;
  --bw-accent-hover: #234a46;
  --bw-accent-soft: rgba(47, 95, 90, 0.09);
  --bw-on-accent: #f7f5ef;
  --bw-focus-ring: rgba(47, 95, 90, 0.5);
  --bw-success: #2f7d55;
  --bw-warning: #a8762a;
  --bw-danger: #a8463a;

  /* ---- glass: mandatory for every floating layer ---------------------- */
  --bw-glass-bg: rgba(246, 244, 238, 0.74);
  --bw-glass-border: rgba(255, 255, 255, 0.6);
  --bw-glass-highlight: rgba(255, 255, 255, 0.85);
  --bw-glass-shadow:
    0 12px 32px -10px rgba(30, 30, 26, 0.2),
    0 2px 8px -2px rgba(30, 30, 26, 0.08);
  --bw-glass-blur: 20px;
  --bw-glass-saturate: 170%;
  --bw-scrim: rgba(24, 24, 21, 0.34);

  /* ---- elevation (static, non-floating) ------------------------------- */
  --bw-shadow-sm: 0 1px 2px rgba(30, 30, 26, 0.06);
  --bw-shadow-md: 0 8px 24px -8px rgba(30, 30, 26, 0.16);

  /* ---- radius: print-like, almost square ------------------------------ */
  --bw-radius-xs: 2px;
  --bw-radius-sm: 3px;
  --bw-radius-md: 4px;
  --bw-radius-lg: 6px;
  --bw-radius-xl: 8px;
  --bw-radius-pill: 999px;

  /* ---- motion --------------------------------------------------------- *
   * Distilled from affectUI's motion language: calm, soft, state-driven.
   * Nothing snaps, nothing overshoots loudly.                          */
  --bw-dur-instant: 100ms; /* press / hover feedback                    */
  --bw-dur-fast: 160ms;    /* small state flips, icon swaps             */
  --bw-dur-base: 220ms;    /* menu items, toggles, tabs                 */
  --bw-dur-slow: 320ms;    /* popover / sheet entrance                  */
  --bw-dur-swap: 420ms;    /* content blur-crossfade (affectUI default) */
  --bw-dur-layout: 520ms;  /* box size + position morph                 */
  --bw-dur-theme: 620ms;   /* global light/dark crossfade               */

  --bw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out, the default */
  --bw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --bw-ease-soft: cubic-bezier(0.32, 0.72, 0, 1);    /* long glide        */
  --bw-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* subtle overshoot */

  /* ---- motion magnitudes ---------------------------------------------- */
  --bw-lift: 2px;        /* hover translateY                                */
  --bw-scale-in: 0.98;   /* entrance starts at 98%                          */
  --bw-blur-in: 10px;    /* entrance radius                                */
  --bw-stagger: 40ms;    /* per-item delay in a list                        */

  /* ---- editorial layer (project tokens) ------------------------------- */
  /* body: 霞鹜文楷 · headings: 黑体 · numbers: Manrope */
  --font-read: "LXGW WenKai", "Kaiti SC", "STKaiti", "Songti SC", serif;
  --font-ui: "LXGW WenKai", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-head: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
    "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, sans-serif;
  --font-num: "Manrope Variable", "Manrope", "SF Pro Display", -apple-system,
    "Segoe UI", sans-serif;
  /* the wordmark's English half only — a typewriter slab */
  --font-type: "Cutive Mono", "Courier New", Courier, monospace;
  --shell: 1120px;
  --gutter: 24px;
  --measure: 34em;       /* long-form line length, ~34 CJK characters        */
  --rule: 1px solid var(--bw-border);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;

  --bw-bg: #141513;
  --bw-surface: #1b1c19;
  --bw-surface-raised: #212220;
  --bw-surface-sunken: #101110;
  --bw-border: rgba(236, 232, 223, 0.12);
  --bw-border-strong: rgba(236, 232, 223, 0.26);

  --bw-text: #ece8e0;
  --bw-text-secondary: #a8a49a;
  --bw-text-muted: #8b887e;
  --bw-text-inverse: #1c1c19;

  --bw-accent: #8ebbb3;
  --bw-accent-hover: #a3cac2;
  --bw-accent-soft: rgba(142, 187, 179, 0.13);
  --bw-on-accent: #10201d;
  --bw-focus-ring: rgba(142, 187, 179, 0.55);
  --bw-success: #6fbf8f;
  --bw-warning: #d7a75f;
  --bw-danger: #e08a7e;

  --bw-glass-bg: rgba(24, 25, 22, 0.72);
  --bw-glass-border: rgba(255, 255, 255, 0.09);
  --bw-glass-highlight: rgba(255, 255, 255, 0.06);
  --bw-glass-shadow:
    0 16px 40px -10px rgba(0, 0, 0, 0.62),
    0 2px 8px -2px rgba(0, 0, 0, 0.46);
  --bw-scrim: rgba(0, 0, 0, 0.52);

  --bw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
  --bw-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}

/* ---- reduced motion: shrink, never remove ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bw-dur-instant: 1ms;
    --bw-dur-fast: 1ms;
    --bw-dur-base: 1ms;
    --bw-dur-slow: 1ms;
    --bw-dur-swap: 1ms;
    --bw-dur-layout: 1ms;
    --bw-dur-theme: 1ms;
    --bw-lift: 0px;
    --bw-scale-in: 1;
    --bw-blur-in: 0px;
    --bw-stagger: 0ms;
  }
}