/**
 * 算优台 · Design Tokens（对齐《算优台 UI/产品设计规范 V2.0》2026-05）
 *
 * 主题入口（二选一，建议同时设置以兼容组件库）：
 * - `html[data-theme="light" | "dark"]` — 本站主路径（site-ui / 各页 head）
 * - `html.dark` — 与 `data-theme="dark"` 同义调色板；由 `applyTheme()` 与 cost 页首屏脚本同步 `classList`
 *
 * 组件样式请优先使用本文件中的语义变量（`--bg` / `--card` / `--text-muted` / `--shadow-card` 等），
 * 避免在页面内散落 `#fff`、`#111`、`rgba(...)` 导致深浅色失控。
 * 增量策略与分阶段迁移顺序见：`docs/DESIGN_TOKENS_INCREMENTAL.md`。
 * Toket 产品视觉（登录页标杆）见：`docs/toket-design-system-v1.md`（`--toket-*` Phase 0 起）。
 *
 * 浅色：页 #F7F7FA、卡 #FFF、边 #ECECF1、主文 #111827、次文 #4B5563、弱化 #9CA3AF
 * 深色：深灰蓝页 #202123、卡 #343541（非纯黑）、边 #3F3F46
 * 布局：主容器 1280px、阅读区 960px、输入类 880px
 */

:root {
  --dt-color-brand: #6d5ae6;
  --dt-color-brand-soft: #ede9fe;
  --dt-color-success: #10b981;
  --dt-color-warning: #f59e0b;
  --dt-color-danger: #ef4444;

  --dt-font-xs: 12px;
  --dt-font-sm: 14px;
  --dt-font-base: 16px;
  --dt-font-md: 20px;
  --dt-font-lg: 28px;
  --dt-font-xl: 36px;

  --dt-space-1: 8px;
  --dt-space-2: 12px;
  --dt-space-3: 16px;
  --dt-space-4: 24px;
  --dt-space-5: 32px;
  --dt-space-6: 48px;

  --dt-radius-sm: 8px;
  --dt-radius-md: 12px;
  --dt-radius-lg: 16px;

  --dt-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --dt-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* 无衬线：英文优先 Inter，中文优先思源黑体 / 系统中文黑体 */
  --dt-font-sans: "Inter", "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --dt-duration: 0.25s;
  --dt-transition: var(--dt-duration) linear;

  --dt-layout-page-max: 1280px;
  --dt-layout-read-max: 960px;
  --dt-layout-input-max: 880px;

  /* 品牌按钮上的字色；与主题无关 */
  --text-on-primary: #ffffff;
}

html[data-theme="light"] {
  --dt-page-bg: #f7f7fa;
  --dt-card-bg: #ffffff;
  --dt-text: #111827;
  --dt-text-muted: #4b5563;
  --dt-text-faint: #9ca3af;
  --dt-border: #ececf1;
  --dt-muted-bg: #f3f4f6;
  --dt-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --dt-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
}

:is(html[data-theme="dark"], html.dark) {
  --dt-page-bg: #0b0d12;
  --dt-card-bg: #161b22;
  --dt-text: #f3f4f6;
  --dt-text-muted: #b8c0cc;
  --dt-text-faint: #7f8896;
  --dt-border: rgba(255, 255, 255, 0.1);
  --dt-muted-bg: #12161d;
  /* 深色：阴影减弱，避免卡片「浮空发光」 */
  --dt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.38);
  --dt-shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.42);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --dt-page-bg: #f7f7fa;
    --dt-card-bg: #ffffff;
    --dt-text: #111827;
    --dt-text-muted: #4b5563;
    --dt-text-faint: #9ca3af;
    --dt-border: #ececf1;
    --dt-muted-bg: #f3f4f6;
    --dt-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
    --dt-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --dt-page-bg: #0b0d12;
    --dt-card-bg: #161b22;
    --dt-text: #f3f4f6;
    --dt-text-muted: #b8c0cc;
    --dt-text-faint: #7f8896;
    --dt-border: rgba(255, 255, 255, 0.1);
    --dt-muted-bg: #12161d;
    --dt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.38);
    --dt-shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.42);
  }
}

/* —— 全站 bridge（兼容现有 --primary / --dark-bg / --font-* / --space-*）—— */
html[data-theme="light"],
html[data-theme="dark"],
html.dark {
  /* 官网 index 历史变量名 → 文档间距 */
  --space-12: var(--dt-space-2);
  --space-16: var(--dt-space-3);
  --space-20: var(--dt-space-4);
  --space-24: var(--dt-space-4);
  --space-32: var(--dt-space-5);
  --space-48: var(--dt-space-6);
  --space-64: var(--dt-space-6);

  --primary: var(--dt-color-brand);
  --primary-2: #7c6cf5;
  --layout-page-max: var(--dt-layout-page-max);
  --layout-read-max: var(--dt-layout-read-max);
  --layout-input-max: var(--dt-layout-input-max);
  /* SEO 落地页 */
  --bg: var(--dt-page-bg);
  --bg-soft: var(--dt-card-bg);
  --card: var(--dt-card-bg);
  --text: var(--dt-text);
  --muted: var(--dt-text-muted);
  --brand: var(--dt-color-brand);
  --brand-2: #7c6cf5;
  --dark-bg: var(--dt-page-bg);
  --card-bg: var(--dt-card-bg);
  --text-main: var(--dt-text);
  --text-sub: var(--dt-text-muted);
  --text-secondary: var(--dt-text-muted);
  --link-color: var(--primary-2, var(--dt-color-brand-2, #7c6cf5));
  --line: var(--dt-border);
  --line-soft: rgba(17, 24, 39, 0.08);

  --font-xs: var(--dt-font-xs);
  --font-sm: var(--dt-font-sm);
  --font-base: var(--dt-font-base);
  --font-lg: var(--dt-font-lg);
  --font-xl: var(--dt-font-md);
  --font-2xl: var(--dt-font-xl);

  --space-xs: var(--dt-space-1);
  --space-sm: var(--dt-space-1);
  --space-md: var(--dt-space-2);
  --space-lg: var(--dt-space-3);
  --space-xl: var(--dt-space-4);
  --space-2xl: var(--dt-space-6);

  --radius-sm: var(--dt-radius-sm);
  --radius-base: var(--dt-radius-md);
  --radius-lg: var(--dt-radius-lg);
  --radius-card: var(--dt-radius-lg);
  --radius-input: var(--dt-radius-md);

  --shadow-card: var(--dt-shadow-1);
  --shadow-card-hover: var(--dt-shadow-hover);
  --focus-ring: 0 0 0 3px rgba(109, 90, 230, 0.24);
}

html[data-theme="light"] {
  --line-soft: rgba(17, 24, 39, 0.08);
  --table-head-bg: #f3f4f6;
  --table-zebra: #f7f7fa;
  /* 次要控件用灰体系；紫色留给主按钮与推荐类标签 */
  --accent-pill-bg: rgba(17, 24, 39, 0.04);
  --accent-pill-border: #e4e4e7;
  --accent-pill-bg-hover: rgba(17, 24, 39, 0.07);
  --accent-pill-border-hover: #d4d4d8;
  --accent-tag-bg: #eef2ff;
  --accent-tag-border: rgba(109, 90, 230, 0.22);
  --accent-tag-text: #4338ca;
}

:is(html[data-theme="dark"], html.dark) {
  --line-soft: rgba(255, 255, 255, 0.08);
  --table-head-bg: rgba(255, 255, 255, 0.06);
  --table-zebra: rgba(255, 255, 255, 0.04);
  --accent-pill-bg: rgba(79, 70, 229, 0.18);
  --accent-pill-border: rgba(165, 180, 252, 0.28);
  --accent-pill-bg-hover: rgba(79, 70, 229, 0.26);
  --accent-pill-border-hover: rgba(199, 210, 254, 0.38);
  --accent-tag-bg: rgba(79, 70, 229, 0.22);
  --accent-tag-border: rgba(165, 180, 252, 0.32);
  --accent-tag-text: #e0e7ff;
  --accent-link: #a5b4fc;
  --accent-link-hover: #c7d2fe;
  --focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.35);
}

/*
 * —— AI SaaS 语义层（与 bridge 并存；新代码优先用下列命名）——
 * 浅色 / 深色分支使用 color-mix；`html:not([data-theme])` 依赖下方 @media (prefers-color-scheme) 提供 --dt-*。
 */
html[data-theme="light"],
html[data-theme="dark"],
html.dark,
html:not([data-theme]) {
  --bg-primary: var(--dt-page-bg);
  --bg-secondary: var(--dt-muted-bg);
  --card-bg: var(--dt-card-bg);
  --text-primary: var(--dt-text);
  --text-secondary: var(--dt-text-muted);
  --text-muted: var(--dt-text-faint);
  --border-color: var(--dt-border);
  --accent: var(--dt-color-brand);
  --success: var(--dt-color-success);
  --warning: var(--dt-color-warning);
  --danger: var(--dt-color-danger);
  --border-subtle: var(--line-soft);
}

html[data-theme="light"] {
  --card-hover: color-mix(in srgb, var(--dt-card-bg) 93%, var(--dt-text) 7%);
  --text-disabled: color-mix(in srgb, var(--dt-text-faint) 55%, var(--dt-page-bg) 45%);
  --border-input: color-mix(in srgb, var(--dt-border) 72%, var(--dt-text) 28%);
  --primary-hover: color-mix(in srgb, var(--dt-color-brand) 88%, #1e1b4b 12%);
  --shadow: var(--dt-shadow-1);
  --shadow-dropdown: 0 14px 44px rgba(15, 23, 42, 0.1);
  --shadow-modal: 0 28px 80px rgba(15, 23, 42, 0.14);
}

:is(html[data-theme="dark"], html.dark) {
  --card-hover: color-mix(in srgb, var(--dt-card-bg) 88%, #ffffff 12%);
  --text-disabled: color-mix(in srgb, var(--dt-text-faint) 42%, var(--dt-page-bg) 58%);
  --border-input: color-mix(in srgb, var(--dt-border) 55%, #ffffff 45%);
  --primary-hover: color-mix(in srgb, var(--dt-color-brand) 86%, #ffffff 14%);
  --shadow: var(--dt-shadow-1);
  --shadow-dropdown: 0 18px 48px rgba(0, 0, 0, 0.32);
  --shadow-modal: 0 28px 80px rgba(0, 0, 0, 0.42);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --space-12: var(--dt-space-2);
    --space-16: var(--dt-space-3);
    --space-20: var(--dt-space-4);
    --space-24: var(--dt-space-4);
    --space-32: var(--dt-space-5);
    --space-48: var(--dt-space-6);
    --space-64: var(--dt-space-6);
    --primary: var(--dt-color-brand);
    --primary-2: #7c6cf5;
    --layout-page-max: var(--dt-layout-page-max);
    --layout-read-max: var(--dt-layout-read-max);
    --layout-input-max: var(--dt-layout-input-max);
    --bg: var(--dt-page-bg);
    --bg-soft: var(--dt-card-bg);
    --card: var(--dt-card-bg);
    --text: var(--dt-text);
    --muted: var(--dt-text-muted);
    --brand: var(--dt-color-brand);
    --brand-2: #7c6cf5;
    --dark-bg: var(--dt-page-bg);
    --card-bg: var(--dt-card-bg);
    --text-main: var(--dt-text);
    --text-sub: var(--dt-text-muted);
    --line: var(--dt-border);
    --line-soft: rgba(17, 24, 39, 0.08);
    --font-xs: var(--dt-font-xs);
    --font-sm: var(--dt-font-sm);
    --font-base: var(--dt-font-base);
    --font-lg: var(--dt-font-lg);
    --font-xl: var(--dt-font-md);
    --font-2xl: var(--dt-font-xl);
    --space-xs: var(--dt-space-1);
    --space-sm: var(--dt-space-1);
    --space-md: var(--dt-space-2);
    --space-lg: var(--dt-space-3);
    --space-xl: var(--dt-space-4);
    --space-2xl: var(--dt-space-6);
    --radius-sm: var(--dt-radius-sm);
    --radius-base: var(--dt-radius-md);
    --radius-lg: var(--dt-radius-lg);
    --radius-card: var(--dt-radius-lg);
    --radius-input: var(--dt-radius-md);
    --shadow-card: var(--dt-shadow-1);
    --shadow-card-hover: var(--dt-shadow-hover);
    --focus-ring: 0 0 0 3px rgba(109, 90, 230, 0.22);
    --table-head-bg: #f3f4f6;
    --table-zebra: #f7f7fa;
    --accent-pill-bg: rgba(17, 24, 39, 0.04);
    --accent-pill-border: #e4e4e7;
    --accent-pill-bg-hover: rgba(17, 24, 39, 0.07);
    --accent-pill-border-hover: #d4d4d8;
    --accent-tag-bg: #eef2ff;
    --accent-tag-border: rgba(109, 90, 230, 0.22);
    --accent-tag-text: #4338ca;
    /* 与 html[data-theme="light"] 语义层一致（系统浅色 + 未显式 data-theme） */
    --bg-secondary: var(--dt-muted-bg);
    --text-secondary: var(--dt-text-muted);
    --text-muted: var(--dt-text-faint);
    --success: var(--dt-color-success);
    --warning: var(--dt-color-warning);
    --danger: var(--dt-color-danger);
    --border-subtle: var(--line-soft);
    --card-hover: color-mix(in srgb, var(--dt-card-bg) 93%, var(--dt-text) 7%);
    --text-disabled: color-mix(in srgb, var(--dt-text-faint) 55%, var(--dt-page-bg) 45%);
    --border-input: color-mix(in srgb, var(--dt-border) 72%, var(--dt-text) 28%);
    --primary-hover: color-mix(in srgb, var(--dt-color-brand) 88%, #1e1b4b 12%);
    --shadow: var(--dt-shadow-1);
    --shadow-dropdown: 0 14px 44px rgba(15, 23, 42, 0.1);
    --shadow-modal: 0 28px 80px rgba(15, 23, 42, 0.14);
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --space-12: var(--dt-space-2);
    --space-16: var(--dt-space-3);
    --space-20: var(--dt-space-4);
    --space-24: var(--dt-space-4);
    --space-32: var(--dt-space-5);
    --space-48: var(--dt-space-6);
    --space-64: var(--dt-space-6);
    --primary: var(--dt-color-brand);
    --primary-2: #7c6cf5;
    --bg: var(--dt-page-bg);
    --bg-soft: var(--dt-card-bg);
    --card: var(--dt-card-bg);
    --text: var(--dt-text);
    --muted: var(--dt-text-muted);
    --brand: var(--dt-color-brand);
    --brand-2: #7c6cf5;
    --layout-page-max: var(--dt-layout-page-max);
    --layout-read-max: var(--dt-layout-read-max);
    --layout-input-max: var(--dt-layout-input-max);
    --dark-bg: var(--dt-page-bg);
    --card-bg: var(--dt-card-bg);
    --text-main: var(--dt-text);
    --text-sub: var(--dt-text-muted);
    --line: var(--dt-border);
    --line-soft: rgba(255, 255, 255, 0.08);
    --font-xs: var(--dt-font-xs);
    --font-sm: var(--dt-font-sm);
    --font-base: var(--dt-font-base);
    --font-lg: var(--dt-font-lg);
    --font-xl: var(--dt-font-md);
    --font-2xl: var(--dt-font-xl);
    --space-xs: var(--dt-space-1);
    --space-sm: var(--dt-space-1);
    --space-md: var(--dt-space-2);
    --space-lg: var(--dt-space-3);
    --space-xl: var(--dt-space-4);
    --space-2xl: var(--dt-space-6);
    --radius-sm: var(--dt-radius-sm);
    --radius-base: var(--dt-radius-md);
    --radius-lg: var(--dt-radius-lg);
    --radius-card: var(--dt-radius-lg);
    --radius-input: var(--dt-radius-md);
    --shadow-card: var(--dt-shadow-1);
    --shadow-card-hover: var(--dt-shadow-hover);
    --focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.35);
    --table-head-bg: rgba(255, 255, 255, 0.06);
    --table-zebra: rgba(255, 255, 255, 0.04);
    --accent-pill-bg: rgba(79, 70, 229, 0.18);
    --accent-pill-border: rgba(165, 180, 252, 0.28);
    --accent-pill-bg-hover: rgba(79, 70, 229, 0.26);
    --accent-pill-border-hover: rgba(199, 210, 254, 0.38);
    --accent-tag-bg: rgba(79, 70, 229, 0.22);
    --accent-tag-border: rgba(165, 180, 252, 0.32);
    --accent-tag-text: #e0e7ff;
    --accent-link: #a5b4fc;
    --accent-link-hover: #c7d2fe;
    /* 与 :is(html[data-theme="dark"], html.dark) 语义层一致 */
    --bg-primary: var(--dt-page-bg);
    --bg-secondary: var(--dt-muted-bg);
    --text-primary: var(--dt-text);
    --text-secondary: var(--dt-text-muted);
    --text-muted: var(--dt-text-faint);
    --success: var(--dt-color-success);
    --warning: var(--dt-color-warning);
    --danger: var(--dt-color-danger);
    --border-subtle: var(--line-soft);
    --card-hover: color-mix(in srgb, var(--dt-card-bg) 88%, #ffffff 12%);
    --text-disabled: color-mix(in srgb, var(--dt-text-faint) 42%, var(--dt-page-bg) 58%);
    --border-input: color-mix(in srgb, var(--dt-border) 55%, #ffffff 45%);
    --primary-hover: color-mix(in srgb, var(--dt-color-brand) 86%, #ffffff 14%);
    --shadow: var(--dt-shadow-1);
    --shadow-dropdown: 0 18px 48px rgba(0, 0, 0, 0.32);
    --shadow-modal: 0 28px 80px rgba(0, 0, 0, 0.42);
  }
}

html {
  font-family: var(--dt-font-sans);
}

/*
 * —— Toket Design System v1 · Phase 0（仅 token，无组件类）——
 * 视觉标杆：cost/login.html + assets/cost-login-pay-shared.css
 * 规范全文：docs/toket-design-system-v1.md
 *
 * 本段不修改 --primary / --dt-color-brand，避免未接入页面发生视觉漂移。
 * 新样式请用 --toket-*；接入阶段结束后可再统一 bridge。
 */
:root {
  --toket-brand: #635bff;
  --toket-brand-2: #7c6cff;
  --toket-brand-hover: #5a52f5;
  --toket-brand-2-hover: #7264ff;
  --toket-brand-rgb: 99, 91, 255;

  --toket-gradient-primary: linear-gradient(135deg, var(--toket-brand) 0%, var(--toket-brand-2) 100%);
  --toket-gradient-primary-hover: linear-gradient(
    135deg,
    var(--toket-brand-hover) 0%,
    var(--toket-brand-2-hover) 100%
  );
  --toket-gradient-cta-alt: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%);

  /* Legacy lite chrome bridge (homepage Phase 1) */
  --site-cta-gradient: var(--toket-gradient-primary);
  --site-cta-shadow: 0 8px 22px color-mix(in srgb, var(--toket-brand) 32%, transparent);

  --toket-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;

  --toket-font-hero: 20px;
  --toket-font-title: 1.125rem;
  --toket-font-body: 15px;
  --toket-font-body-sm: 14px;
  --toket-font-caption: 13px;
  --toket-font-micro: 12px;
  --toket-font-divider: 11px;
  --toket-font-brand: 20px;
  --toket-font-otp-digit: 20px;

  --toket-weight-regular: 400;
  --toket-weight-medium: 500;
  --toket-weight-semibold: 600;
  --toket-weight-bold: 700;

  --toket-leading-tight: 1.3;
  --toket-leading-body: 1.55;
  --toket-leading-tagline: 1.45;
  --toket-tracking-tight: -0.03em;
  --toket-tracking-ui: 0.01em;
  --toket-tracking-caps: 0.04em;
  --toket-tracking-otp: 0.04em;

  --toket-radius-control: 14px;
  --toket-radius-card-lg: 24px;
  --toket-radius-card-md: 20px;
  --toket-radius-panel: 16px;
  --toket-radius-pill: 999px;

  --toket-height-control: 56px;
  --toket-height-btn: 52px;
  --toket-height-btn-sso: 52px;

  --toket-space-otp-gap: 10px;
  --toket-space-otp-gap-tight: 6px;
  --toket-space-divider-y: 28px;
  --toket-space-divider-y-after: 18px;
  --toket-space-consent-top: 18px;
  --toket-space-brand-bottom: 24px;
  --toket-space-btn-top: 14px;

  --toket-layout-card-max: 420px;
  --toket-card-padding-lg: 40px 36px 36px;
  --toket-card-padding-md: 32px 24px 28px;
  --toket-layout-shell-x: 20px;
  --toket-layout-shell-x-tight: 16px;
  --toket-layout-marketing-max: 1080px;

  --toket-duration-fast: 0.15s;
  --toket-duration-ui: 0.2s;
  --toket-duration-step: 0.22s;
  --toket-duration-overlay: 0.28s;
  --toket-duration-success: 0.35s;
  --toket-ease-ui: ease;
  --toket-transition-ui: var(--toket-duration-ui) var(--toket-ease-ui);
  --toket-transition-step: var(--toket-duration-step) var(--toket-ease-ui);

  --toket-translate-hover-btn: -2px;
  --toket-translate-hover-secondary: -1px;
  --toket-translate-hover-card: -2px;
  --toket-translate-step-enter: 6px;
  --toket-translate-step-exit: -4px;

  --toket-opacity-disabled: 0.65;
  --toket-opacity-disabled-soft: 0.45;
  --toket-opacity-loading-label: 0;

  --toket-spinner-btn: 18px;
  --toket-spinner-overlay: 28px;
  --toket-spinner-duration: 0.65s;

  --toket-blur-card-light: 16px;
  --toket-blur-card-dark: 20px;
  --toket-blur-overlay: 12px;

  --toket-theme-storage-key: toket_theme;
}

html[data-theme="light"] {
  --toket-meta-theme-color: #f8fafc;
  --toket-bg-page: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  --toket-bg-glow: radial-gradient(
      ellipse 80% 50% at 50% -10%,
      rgba(var(--toket-brand-rgb), 0.08),
      transparent 55%
    ),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(124, 108, 255, 0.06), transparent 50%);
  --toket-card-bg: color-mix(in srgb, var(--dt-card-bg) 92%, #fff);
  --toket-card-border: 1px solid color-mix(in srgb, #fff 65%, var(--dt-border) 35%);
  --toket-card-shadow: 0 20px 50px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(var(--toket-brand-rgb), 0.04);
  --toket-card-ring: 0 0 0 1px color-mix(in srgb, var(--dt-border) 40%, transparent);
  --toket-input-bg: color-mix(in srgb, var(--dt-card-bg) 98%, #fff);
  --toket-input-border: color-mix(in srgb, var(--dt-border) 80%, transparent);
  --toket-input-border-hover: color-mix(in srgb, var(--toket-brand) 28%, var(--dt-border));
  --toket-input-border-focus: color-mix(in srgb, var(--toket-brand) 45%, var(--dt-border));
  --toket-input-bg-focus: #fff;
  --toket-focus-ring: 0 0 0 4px color-mix(in srgb, var(--toket-brand) 12%, transparent);
  --toket-btn-primary-shadow: 0 4px 14px color-mix(in srgb, var(--toket-brand) 28%, transparent);
  --toket-btn-primary-shadow-hover: 0 8px 22px color-mix(in srgb, var(--toket-brand) 32%, transparent);
  --toket-btn-secondary-bg: #fff;
  --toket-btn-secondary-border: color-mix(in srgb, var(--dt-border) 75%, transparent);
  --toket-btn-secondary-shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.08);
  --toket-otp-filled-bg: color-mix(in srgb, var(--toket-brand) 8%, #fff);
  --toket-otp-filled-border: color-mix(in srgb, var(--toket-brand-2) 32%, var(--dt-border));
  --toket-text: var(--dt-text);
  --toket-text-muted: color-mix(in srgb, var(--dt-text-muted) 88%, transparent);
  --toket-placeholder: color-mix(in srgb, var(--dt-text-muted) 42%, transparent);
  --toket-overlay-bg: color-mix(in srgb, #f8fafc 55%, transparent);
}

:is(html[data-theme="dark"], html.dark) {
  --toket-meta-theme-color: #0b1020;
  --toket-bg-page: radial-gradient(
      circle at top,
      rgba(var(--toket-brand-rgb), 0.22),
      transparent 45%
    ),
    #0b1020;
  --toket-bg-glow: none;
  --toket-card-bg: color-mix(in srgb, var(--dt-card-bg) 72%, transparent);
  --toket-card-border: 1px solid rgba(255, 255, 255, 0.08);
  --toket-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 12px 40px rgba(0, 0, 0, 0.28);
  --toket-card-ring: none;
  --toket-input-bg: rgba(255, 255, 255, 0.04);
  --toket-input-border: rgba(255, 255, 255, 0.1);
  --toket-input-border-hover: rgba(255, 255, 255, 0.14);
  --toket-input-border-focus: color-mix(in srgb, var(--toket-brand) 45%, rgba(255, 255, 255, 0.12));
  --toket-input-bg-focus: rgba(var(--toket-brand-rgb), 0.12);
  --toket-focus-ring: 0 0 0 3px rgba(var(--toket-brand-rgb), 0.18);
  --toket-btn-primary-shadow: none;
  --toket-btn-primary-shadow-hover: none;
  --toket-btn-secondary-bg: color-mix(in srgb, var(--dt-card-bg) 94%, #fff 6%);
  --toket-btn-secondary-border: var(--dt-border);
  --toket-btn-secondary-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.35);
  --toket-otp-filled-bg: color-mix(in srgb, var(--toket-brand) 18%, var(--dt-card-bg));
  --toket-otp-filled-border: color-mix(in srgb, var(--toket-brand-2) 35%, var(--dt-border));
  --toket-text: var(--dt-text);
  --toket-text-muted: var(--dt-text-muted);
  --toket-placeholder: color-mix(in srgb, var(--dt-text-muted) 42%, transparent);
  --toket-overlay-bg: color-mix(in srgb, #0b0d12 72%, transparent);
  --toket-link: var(--accent-link, #a5b4fc);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --toket-meta-theme-color: #f8fafc;
    --toket-bg-page: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    --toket-bg-glow: radial-gradient(
        ellipse 80% 50% at 50% -10%,
        rgba(var(--toket-brand-rgb), 0.08),
        transparent 55%
      ),
      radial-gradient(ellipse 60% 40% at 100% 100%, rgba(124, 108, 255, 0.06), transparent 50%);
    --toket-card-bg: color-mix(in srgb, var(--dt-card-bg) 92%, #fff);
    --toket-card-border: 1px solid color-mix(in srgb, #fff 65%, var(--dt-border) 35%);
    --toket-card-shadow: 0 20px 50px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(var(--toket-brand-rgb), 0.04);
    --toket-card-ring: 0 0 0 1px color-mix(in srgb, var(--dt-border) 40%, transparent);
    --toket-input-bg: color-mix(in srgb, var(--dt-card-bg) 98%, #fff);
    --toket-input-border: color-mix(in srgb, var(--dt-border) 80%, transparent);
    --toket-input-border-hover: color-mix(in srgb, var(--toket-brand) 28%, var(--dt-border));
    --toket-input-border-focus: color-mix(in srgb, var(--toket-brand) 45%, var(--dt-border));
    --toket-input-bg-focus: #fff;
    --toket-focus-ring: 0 0 0 4px color-mix(in srgb, var(--toket-brand) 12%, transparent);
    --toket-btn-primary-shadow: 0 4px 14px color-mix(in srgb, var(--toket-brand) 28%, transparent);
    --toket-btn-primary-shadow-hover: 0 8px 22px color-mix(in srgb, var(--toket-brand) 32%, transparent);
    --toket-btn-secondary-bg: #fff;
    --toket-btn-secondary-border: color-mix(in srgb, var(--dt-border) 75%, transparent);
    --toket-btn-secondary-shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.08);
    --toket-otp-filled-bg: color-mix(in srgb, var(--toket-brand) 8%, #fff);
    --toket-otp-filled-border: color-mix(in srgb, var(--toket-brand-2) 32%, var(--dt-border));
    --toket-text: var(--dt-text);
    --toket-text-muted: color-mix(in srgb, var(--dt-text-muted) 88%, transparent);
    --toket-placeholder: color-mix(in srgb, var(--dt-text-muted) 42%, transparent);
    --toket-overlay-bg: color-mix(in srgb, #f8fafc 55%, transparent);
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --toket-meta-theme-color: #0b1020;
    --toket-bg-page: radial-gradient(
        circle at top,
        rgba(var(--toket-brand-rgb), 0.22),
        transparent 45%
      ),
      #0b1020;
    --toket-bg-glow: none;
    --toket-card-bg: color-mix(in srgb, var(--dt-card-bg) 72%, transparent);
    --toket-card-border: 1px solid rgba(255, 255, 255, 0.08);
    --toket-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 12px 40px rgba(0, 0, 0, 0.28);
    --toket-card-ring: none;
    --toket-input-bg: rgba(255, 255, 255, 0.04);
    --toket-input-border: rgba(255, 255, 255, 0.1);
    --toket-input-border-hover: rgba(255, 255, 255, 0.14);
    --toket-input-border-focus: color-mix(in srgb, var(--toket-brand) 45%, rgba(255, 255, 255, 0.12));
    --toket-input-bg-focus: rgba(var(--toket-brand-rgb), 0.12);
    --toket-focus-ring: 0 0 0 3px rgba(var(--toket-brand-rgb), 0.18);
    --toket-btn-primary-shadow: none;
    --toket-btn-primary-shadow-hover: none;
    --toket-btn-secondary-bg: color-mix(in srgb, var(--dt-card-bg) 94%, #fff 6%);
    --toket-btn-secondary-border: var(--dt-border);
    --toket-btn-secondary-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.35);
    --toket-otp-filled-bg: color-mix(in srgb, var(--toket-brand) 18%, var(--dt-card-bg));
    --toket-otp-filled-border: color-mix(in srgb, var(--toket-brand-2) 35%, var(--dt-border));
    --toket-text: var(--dt-text);
    --toket-text-muted: var(--dt-text-muted);
    --toket-placeholder: color-mix(in srgb, var(--dt-text-muted) 42%, transparent);
    --toket-overlay-bg: color-mix(in srgb, #0b0d12 72%, transparent);
    --toket-link: #a5b4fc;
  }
}