:root {
  color-scheme: light;

  --sm-color-sand-50: #fdfaf4;
  --sm-color-sand-100: #f8f2e8;
  --sm-color-sand-200: #f5efe6;
  --sm-color-jade-500: #2f7f6d;
  --sm-color-jade-600: #256657;
  --sm-color-coral-500: #e86d5a;
  --sm-color-coral-600: #cc5b48;
  --sm-color-ink-900: #1f2a30;
  --sm-color-ink-700: #4a5a64;
  --sm-color-line-200: #dfe6e4;
  --sm-color-white: #ffffff;
  --sm-color-gold-soft: #d9b26b;
  --sm-color-sky-soft: #9cc4dc;

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

  --sm-radius-sm: 8px;
  --sm-radius-md: 12px;
  --sm-radius-lg: 18px;
  --sm-radius-pill: 999px;

  --sm-shadow-sm: 0 8px 20px rgba(31, 42, 48, 0.1);
  --sm-shadow-md: 0 16px 42px rgba(31, 42, 48, 0.14);
  --sm-shadow-lg: 0 24px 64px rgba(31, 42, 48, 0.2);

  --sm-font-sans:
    "Avenir Next", "Segoe UI", "PingFang SC", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
  --sm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sm-bg-app:
    radial-gradient(circle at 16% 12%, rgba(156, 196, 220, 0.24), transparent 34%),
    radial-gradient(circle at 85% 18%, rgba(232, 109, 90, 0.14), transparent 36%),
    linear-gradient(180deg, var(--sm-color-sand-50), var(--sm-color-sand-200));

  --sm-surface-card: rgba(255, 255, 255, 0.9);
  --sm-border-default: 1px solid rgba(223, 230, 228, 0.95);

  --sm-button-primary-bg: linear-gradient(135deg, var(--sm-color-jade-600), var(--sm-color-jade-500));
  --sm-button-primary-color: var(--sm-color-white);
  --sm-button-secondary-bg: var(--sm-color-white);
  --sm-button-secondary-color: var(--sm-color-ink-900);
  --sm-button-accent-bg: linear-gradient(135deg, var(--sm-color-coral-600), var(--sm-color-coral-500));
  --sm-button-accent-color: var(--sm-color-white);

  --sm-text-primary: var(--sm-color-ink-900);
  --sm-text-muted: var(--sm-color-ink-700);
  --sm-focus-ring: 0 0 0 3px rgba(47, 127, 109, 0.18);
}