/* ============================================================
   Offer岛 design tokens
   One shared vocabulary for the public site, settings and Agent UI.
   Component files consume semantic tokens instead of owning colors/sizes.
   ============================================================ */
:root {
  color-scheme: light;

  /* Typography */
  --od-font-sans: 'Geist', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --od-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --od-text-2xs: 11px;
  --od-text-xs: 12px;
  --od-text-sm: 13px;
  --od-text-md: 14px;
  --od-text-lg: 16px;
  --od-text-xl: 20px;
  --od-text-2xl: 24px;
  --od-leading-tight: 1.25;
  --od-leading-ui: 1.4;
  --od-leading-body: 1.6;
  --od-weight-regular: 400;
  --od-weight-medium: 500;
  --od-weight-semibold: 600;
  --od-weight-bold: 700;
  --od-tracking-heading: -0.025em;
  --od-tracking-ui: -0.01em;

  /* Color — warm neutral base, one dominant brand blue */
  --od-bg: #faf9f6;
  --od-surface: #ffffff;
  --od-surface-subtle: #f5f4f1;
  --od-surface-raised: #ffffff;
  --od-text-primary: #121214;
  --od-text-secondary: #505058;
  --od-text-tertiary: #85858e;
  --od-text-disabled: #adadb5;
  --od-border: rgba(18, 18, 20, 0.10);
  --od-border-strong: rgba(18, 18, 20, 0.18);
  --od-overlay: rgba(18, 18, 20, 0.42);
  --od-accent: #0a87f7;
  --od-accent-hover: #0876dc;
  --od-accent-solid: #0876dc;
  --od-accent-solid-hover: #0667c7;
  --od-accent-text: #0969da;
  --od-accent-soft: rgba(10, 135, 247, 0.08);
  --od-accent-soft-strong: rgba(10, 135, 247, 0.14);
  --od-success: #17884a;
  --od-success-soft: rgba(23, 136, 74, 0.09);
  --od-warning: #a85f00;
  --od-warning-soft: rgba(168, 95, 0, 0.09);
  --od-danger: #c9364f;
  --od-danger-hover: #ac2840;
  --od-danger-soft: rgba(201, 54, 79, 0.08);

  /* Compact product scale */
  --od-space-1: 4px;
  --od-space-2: 8px;
  --od-space-3: 12px;
  --od-space-4: 16px;
  --od-space-5: 20px;
  --od-space-6: 24px;
  --od-space-8: 32px;
  --od-space-10: 40px;
  --od-space-12: 48px;
  --od-space-16: 64px;
  /* Three-level surface language: compact controls, menus, and cards. */
  --od-radius-sm: 8px;
  --od-radius-md: 12px;
  --od-radius-lg: 16px;
  --od-radius-xl: 16px;
  --od-radius-pill: 999px;
  --od-control-xs: 24px;
  --od-control-sm: 28px;
  --od-control-md: 36px;
  --od-control-lg: 44px;

  /* Floating surfaces only */
  --od-shadow-xs: 0 1px 2px rgba(18, 18, 20, 0.05);
  --od-shadow-md: 0 14px 36px -18px rgba(18, 18, 20, 0.24);
  --od-shadow-lg: 0 24px 64px -24px rgba(18, 18, 20, 0.32);

  /* Interaction */
  --od-duration-fast: 140ms;
  --od-duration-base: 200ms;
  --od-duration-slow: 300ms;
  --od-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --od-focus-ring: 0 0 0 3px rgba(10, 135, 247, 0.22);
}

html.dark {
  color-scheme: dark;
  --od-bg: #0c1322;
  --od-surface: #121c2f;
  --od-surface-subtle: #17243a;
  --od-surface-raised: #1a2941;
  --od-text-primary: #eeeef2;
  --od-text-secondary: #c2c5ce;
  --od-text-tertiary: #8f96a3;
  --od-text-disabled: #626a78;
  --od-border: rgba(255, 255, 255, 0.10);
  --od-border-strong: rgba(255, 255, 255, 0.18);
  --od-overlay: rgba(2, 7, 16, 0.66);
  --od-accent: #60a5fa;
  --od-accent-hover: #7bb5fb;
  --od-accent-solid: #60a5fa;
  --od-accent-solid-hover: #7bb5fb;
  --od-accent-text: #93c5fd;
  --od-accent-soft: rgba(96, 165, 250, 0.12);
  --od-accent-soft-strong: rgba(96, 165, 250, 0.20);
  --od-success: #4ade80;
  --od-success-soft: rgba(74, 222, 128, 0.12);
  --od-warning: #fbbf24;
  --od-warning-soft: rgba(251, 191, 36, 0.13);
  --od-danger: #fb7185;
  --od-danger-hover: #fda4af;
  --od-danger-soft: rgba(251, 113, 133, 0.13);
  --od-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --od-shadow-md: 0 16px 40px -18px rgba(0, 0, 0, 0.58);
  --od-shadow-lg: 0 28px 72px -24px rgba(0, 0, 0, 0.72);
  --od-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --od-duration-fast: 0ms;
    --od-duration-base: 0ms;
    --od-duration-slow: 0ms;
  }
}