/* ==========================================================================
   Design tokens — HIWIN Web Phone
   A neutral graphite/paper base with one electric-indigo accent.
   Light is the base palette; the dark palette is applied either by the
   system preference (when the user has not chosen) or by [data-theme="dark"].
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- accent ------------------------------------------------------- */
  --accent: #5b63f5;
  --accent-strong: #4a52e8;
  --accent-soft: rgba(91, 99, 245, .11);
  --accent-ring: rgba(91, 99, 245, .30);
  --accent-on: #ffffff;
  --on-positive: #ffffff;
  --on-danger: #ffffff;

  /* --- semantic ----------------------------------------------------- */
  --ok: #0f9d76;
  --ok-soft: rgba(15, 157, 118, .12);
  --warn: #b8760a;
  --warn-soft: rgba(184, 118, 10, .13);
  --danger: #dd3550;
  --danger-strong: #c62b45;
  --danger-soft: rgba(221, 53, 80, .11);

  /* --- surfaces ----------------------------------------------------- */
  --bg: #f2f3f7;
  --bg-tint:
    radial-gradient(1100px 620px at 88% -8%, rgba(91, 99, 245, .11), transparent 70%),
    radial-gradient(760px 520px at -6% 104%, rgba(15, 157, 118, .08), transparent 70%);
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #edeff5;
  --surface-inset: #f2f4f9;
  --overlay: rgba(20, 22, 32, .34);

  /* --- ink ---------------------------------------------------------- */
  --ink: #13161f;
  --ink-2: #464b5c;
  --ink-3: #747a8d;
  --ink-4: #969cae;

  /* --- lines & elevation -------------------------------------------- */
  --line: rgba(19, 22, 37, .10);
  --line-strong: rgba(19, 22, 37, .17);

  --shadow-sm: 0 1px 2px rgba(17, 20, 34, .06), 0 2px 6px rgba(17, 20, 34, .05);
  --shadow-md: 0 4px 12px rgba(17, 20, 34, .07), 0 14px 34px rgba(17, 20, 34, .07);
  --shadow-lg: 0 12px 28px rgba(17, 20, 34, .10), 0 40px 90px rgba(17, 20, 34, .17);
  --shadow-key: 0 1px 0 rgba(255, 255, 255, .75) inset, 0 1px 2px rgba(17, 20, 34, .07);

  /* --- radii -------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 15px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* --- spacing ------------------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-7: 42px;

  /* --- motion ------------------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: .14s var(--ease);
  --base: .22s var(--ease);

  /* --- type --------------------------------------------------------- */
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, sans-serif;

  /* --- layout ------------------------------------------------------- */
  --rail-w: 96px;
  --appbar-h: 68px;
  --tabbar-h: 62px;
  --stage-max: 640px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;

  --accent: #7d84ff;
  --accent-strong: #9aa0ff;
  --accent-soft: rgba(125, 132, 255, .16);
  --accent-ring: rgba(125, 132, 255, .34);
  --accent-on: #10121d;
  --on-positive: #06231a;
  --on-danger: #2b0710;

  --ok: #33d69f;
  --ok-soft: rgba(51, 214, 159, .14);
  --warn: #f0b13c;
  --warn-soft: rgba(240, 177, 60, .15);
  --danger: #ff6b7f;
  --danger-strong: #ff8296;
  --danger-soft: rgba(255, 107, 127, .15);

  --bg: #0b0d14;
  --bg-tint:
    radial-gradient(1100px 620px at 88% -8%, rgba(125, 132, 255, .17), transparent 70%),
    radial-gradient(760px 520px at -6% 104%, rgba(51, 214, 159, .10), transparent 70%);
  --surface: #141721;
  --surface-2: #191d29;
  --surface-3: #212636;
  --surface-inset: #0e111a;
  --overlay: rgba(4, 5, 10, .68);

  --ink: #f1f3fa;
  --ink-2: #bbc1d4;
  --ink-3: #8a91a7;
  --ink-4: #697089;

  --line: rgba(190, 202, 255, .11);
  --line-strong: rgba(190, 202, 255, .21);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .36);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .40);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .52), 0 60px 120px rgba(0, 0, 0, .40);
  --shadow-key: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 1px 2px rgba(0, 0, 0, .32);
  }
}

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

  --accent: #7d84ff;
  --accent-strong: #9aa0ff;
  --accent-soft: rgba(125, 132, 255, .16);
  --accent-ring: rgba(125, 132, 255, .34);
  --accent-on: #10121d;
  --on-positive: #06231a;
  --on-danger: #2b0710;

  --ok: #33d69f;
  --ok-soft: rgba(51, 214, 159, .14);
  --warn: #f0b13c;
  --warn-soft: rgba(240, 177, 60, .15);
  --danger: #ff6b7f;
  --danger-strong: #ff8296;
  --danger-soft: rgba(255, 107, 127, .15);

  --bg: #0b0d14;
  --bg-tint:
    radial-gradient(1100px 620px at 88% -8%, rgba(125, 132, 255, .17), transparent 70%),
    radial-gradient(760px 520px at -6% 104%, rgba(51, 214, 159, .10), transparent 70%);
  --surface: #141721;
  --surface-2: #191d29;
  --surface-3: #212636;
  --surface-inset: #0e111a;
  --overlay: rgba(4, 5, 10, .68);

  --ink: #f1f3fa;
  --ink-2: #bbc1d4;
  --ink-3: #8a91a7;
  --ink-4: #697089;

  --line: rgba(190, 202, 255, .11);
  --line-strong: rgba(190, 202, 255, .21);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .36);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .40);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .52), 0 60px 120px rgba(0, 0, 0, .40);
  --shadow-key: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 1px 2px rgba(0, 0, 0, .32);
}