/* #region zone:shared.ui.tokens — รูปร่าง ระยะ ตัวอักษร และสถานะร่วมทุกเว็บ */
:root {
  --u-text: #000000;
  --u-text-muted: #606060;
  --u-page: #ffffff;
  --u-card: #f3f3f3;
  --u-card-2: #e6e6e6;
  --u-sheet: #ffffff;
  --u-border: #cfcfcf;
  --u-glass: rgba(255, 255, 255, 0.86);
  --u-radius-dialog: 28px;
  --u-radius-card: 24px;
  --u-pad: 8px;
  --u-radius-inner: calc(var(--u-radius-card) - var(--u-pad));
  --u-radius-pill: 999px;
  --u-space-1: 4px;
  --u-space-2: 8px;
  --u-space-3: 12px;
  --u-space-4: 16px;
  --u-space-5: 24px;
  --u-space-6: 32px;
  --u-text-xs: 12px;
  --u-text-micro: 10px;
  --u-text-note: 11px;
  --u-text-compact: 12.5px;
  --u-text-label: 13.5px;
  --u-text-sm: 13px;
  --u-text-md: 14px;
  --u-text-ui: 15px;
  --u-text-reading: 16px;
  --u-body: 15px;
  --u-text-lg: 17px;
  --u-text-xl: 20px;
  --u-text-2xl: 26px;
  --u-text-title: 22px;
  --u-text-display: 28px;
  --u-text-subheading: 19px;
  --u-text-hero: 36px;
  --u-font: system-ui, sans-serif;
  --u-mono: ui-monospace, monospace;
  --u-tap: 44px;
  --u-duration: 160ms;
  --u-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --u-bg: #fff;
  --u-surface: #f3f3f2;
  --u-surface-2: #e7e7e4;
  --u-pop: #fff;
  --u-ink: #0b0b0b;
  --u-muted: #5f5f5d;
  --u-line: #e1e1de;
  --u-line-strong: #b9b9b5;
  --u-primary: var(--u-ink);
  --u-on-primary: var(--u-bg);
  --u-hover: rgb(0 0 0 / 0.055);
  --u-press: rgb(0 0 0 / 0.11);
  --u-focus: #1f6bff;
  --u-focus-width: 2px;
  --u-focus-offset: -2px;
  --u-focus-backing: #fff;
  --u-up: #067339;
  --u-up-soft: #e1f4e8;
  --u-danger: #b3202c;
  --u-danger-soft: #ffe4e5;
  --u-warning: #7d5200;
  --u-warning-soft: #fbedc6;
  --u-scrim: rgb(0 0 0 / 0.45);
  --u-shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --u-shadow: var(--u-shadow-overlay);
  --u-shadow-lift: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 1px var(--u-line);
  --u-toast-top: calc(env(safe-area-inset-top, 0px) + 72px);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme='light'])) {
    --u-text: #ffffff;
    --u-text-muted: #9a9a9a;
    --u-page: #000000;
    --u-card: #111111;
    --u-card-2: #222222;
    --u-sheet: #161616;
    --u-border: #333333;
    --u-glass: rgba(24, 24, 24, 0.86);
    --u-bg: #0a0a0a;
    --u-surface: #151515;
    --u-surface-2: #232322;
    --u-pop: #1a1a19;
    --u-ink: #f4f4f2;
    --u-muted: #a3a3a0;
    --u-line: #2a2a29;
    --u-line-strong: #4a4a48;
    --u-hover: rgb(255 255 255 / 0.075);
    --u-press: rgb(255 255 255 / 0.14);
    --u-focus: #6ea2ff;
    --u-focus-backing: #0a0a0a;
    --u-up: #3ddc84;
    --u-up-soft: #122c1c;
    --u-danger: #ff8b80;
    --u-danger-soft: #381a16;
    --u-warning: #ffc94d;
    --u-warning-soft: #33270b;
    --u-scrim: rgb(0 0 0 / 0.6);
    --u-shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --u-shadow: var(--u-shadow-overlay);
  }
}
:root:where([data-theme='dark']) {
  --u-text: #ffffff;
  --u-text-muted: #9a9a9a;
  --u-page: #000000;
  --u-card: #111111;
  --u-card-2: #222222;
  --u-sheet: #161616;
  --u-border: #333333;
  --u-glass: rgba(24, 24, 24, 0.86);
  --u-bg: #0a0a0a;
  --u-surface: #151515;
  --u-surface-2: #232322;
  --u-pop: #1a1a19;
  --u-ink: #f4f4f2;
  --u-muted: #a3a3a0;
  --u-line: #2a2a29;
  --u-line-strong: #4a4a48;
  --u-hover: rgb(255 255 255 / 0.075);
  --u-press: rgb(255 255 255 / 0.14);
  --u-focus: #6ea2ff;
  --u-focus-backing: #0a0a0a;
  --u-up: #3ddc84;
  --u-up-soft: #122c1c;
  --u-danger: #ff8b80;
  --u-danger-soft: #381a16;
  --u-warning: #ffc94d;
  --u-warning-soft: #33270b;
  --u-scrim: rgb(0 0 0 / 0.6);
  --u-shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --u-shadow: var(--u-shadow-overlay);
}
/* #endregion */