/* ==========================================================================
   Design tokens · 餐边柜 SKU Studio
   Shared by the public site and the local visual editor.
   ========================================================================== */

:root {
  --font-sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "SFMono-Regular", ui-monospace, "Cascadia Code",
    "Roboto Mono", Menlo, Consolas, monospace;

  --bg: #f3f3ef;
  --bg-deep: #e9eae4;
  --text: #0e1013;
  --text-secondary: #61656d;
  --text-tertiary: #8d9198;
  --text-inverse: #ffffff;

  --accent: #0b6bff;
  --accent-alt: #7559ff;
  --accent-rgb: 11, 107, 255;
  --accent-contrast: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 24%, transparent);

  --surface: rgba(255, 255, 255, 0.64);
  --surface-strong: rgba(255, 255, 255, 0.88);
  --surface-soft: rgba(255, 255, 255, 0.38);
  --surface-muted: rgba(20, 25, 36, 0.045);
  --glass: rgba(255, 255, 255, 0.56);
  --glass-strong: rgba(255, 255, 255, 0.76);
  --glass-soft: rgba(255, 255, 255, 0.38);
  --glass-border: rgba(255, 255, 255, 0.68);
  --hairline: rgba(20, 25, 36, 0.085);
  --hairline-strong: rgba(20, 25, 36, 0.14);

  --success: #188a5b;
  --success-soft: rgba(24, 138, 91, 0.1);
  --warning: #a66b09;
  --warning-soft: rgba(197, 129, 14, 0.11);
  --danger: #d43d3d;
  --danger-soft: rgba(212, 61, 61, 0.09);
  --info: #0b6bff;

  --radius: 28px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 34px;
  --glass-blur: 28px;

  --shadow-xs: 0 1px 2px rgba(25, 30, 40, 0.04);
  --shadow-sm: 0 8px 24px -16px rgba(25, 30, 40, 0.24);
  --shadow-panel: 0 32px 84px -42px rgba(25, 30, 40, 0.34),
    0 6px 24px -18px rgba(25, 30, 40, 0.18);
  --shadow-float: 0 22px 54px -28px rgba(25, 30, 40, 0.34);
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);

  --scrim: rgba(11, 14, 20, 0.34);
  --on-dark: #f5f6f8;
  --code-bg: #0c1017;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --speed-fast: 180ms;
  --speed-base: 320ms;
  --speed-slow: 560ms;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08090b;
    --bg-deep: #040506;
    --text: #f5f5f1;
    --text-secondary: #a3a6ad;
    --text-tertiary: #747981;
    --text-inverse: #090b0e;

    --surface: rgba(28, 31, 37, 0.66);
    --surface-strong: rgba(35, 38, 44, 0.9);
    --surface-soft: rgba(255, 255, 255, 0.045);
    --surface-muted: rgba(255, 255, 255, 0.06);
    --glass: rgba(24, 26, 31, 0.58);
    --glass-strong: rgba(28, 31, 37, 0.82);
    --glass-soft: rgba(30, 33, 39, 0.38);
    --glass-border: rgba(255, 255, 255, 0.1);
    --hairline: rgba(255, 255, 255, 0.085);
    --hairline-strong: rgba(255, 255, 255, 0.14);

    --success: #54d494;
    --success-soft: rgba(84, 212, 148, 0.11);
    --warning: #f0c063;
    --warning-soft: rgba(240, 192, 99, 0.12);
    --danger: #ff8181;
    --danger-soft: rgba(255, 129, 129, 0.1);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 8px 24px -16px rgba(0, 0, 0, 0.5);
    --shadow-panel: 0 38px 96px -46px rgba(0, 0, 0, 0.86),
      0 8px 28px -18px rgba(0, 0, 0, 0.55);
    --shadow-float: 0 24px 58px -28px rgba(0, 0, 0, 0.8);
    --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --scrim: rgba(0, 0, 0, 0.56);
    --on-dark: #f5f6f8;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #08090b;
  --bg-deep: #040506;
  --text: #f5f5f1;
  --text-secondary: #a3a6ad;
  --text-tertiary: #747981;
  --text-inverse: #090b0e;

  --surface: rgba(28, 31, 37, 0.66);
  --surface-strong: rgba(35, 38, 44, 0.9);
  --surface-soft: rgba(255, 255, 255, 0.045);
  --surface-muted: rgba(255, 255, 255, 0.06);
  --glass: rgba(24, 26, 31, 0.58);
  --glass-strong: rgba(28, 31, 37, 0.82);
  --glass-soft: rgba(30, 33, 39, 0.38);
  --glass-border: rgba(255, 255, 255, 0.1);
  --hairline: rgba(255, 255, 255, 0.085);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  --success: #54d494;
  --success-soft: rgba(84, 212, 148, 0.11);
  --warning: #f0c063;
  --warning-soft: rgba(240, 192, 99, 0.12);
  --danger: #ff8181;
  --danger-soft: rgba(255, 129, 129, 0.1);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 8px 24px -16px rgba(0, 0, 0, 0.5);
  --shadow-panel: 0 38px 96px -46px rgba(0, 0, 0, 0.86),
    0 8px 28px -18px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 24px 58px -28px rgba(0, 0, 0, 0.8);
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --scrim: rgba(0, 0, 0, 0.56);
  --on-dark: #f5f6f8;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--accent);
  text-decoration: none;
}

img,
svg {
  display: block;
}

[hidden] {
  display: none !important;
}

::selection {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

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

.glass,
.glass-soft {
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
}

.glass {
  background: linear-gradient(
    142deg,
    color-mix(in srgb, var(--glass-strong) 92%, transparent),
    var(--glass)
  );
  box-shadow: var(--shadow-panel), var(--inset-highlight);
}

.glass-soft {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--glass) 88%, transparent),
    var(--glass-soft)
  );
  box-shadow: var(--shadow-sm), var(--inset-highlight);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass {
    background: var(--surface-strong);
  }

  .glass-soft {
    background: var(--surface);
  }
}

/* Quiet, system-like scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 16%, transparent);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text) 28%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
}

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

:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}