:root {
  --sp-card-radius-main: 1.125rem;
  --sp-card-radius-notch: 0.375rem;
  --sp-card-radius: 1.125rem 0.375rem 1.125rem 1.125rem;
  --sp-card-border-width: 1px;
  --sp-card-bg-glass: rgba(255, 255, 255, 0.8);
  --sp-card-bg-gradient: linear-gradient(135deg,
    hsla(28, 91%, 60%, 0.04) 0%,
    hsla(28, 60%, 60%, 0.02) 100%);
  --sp-card-shadow: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --sp-card-shadow-hover: 0 12px 28px rgba(28, 25, 23, 0.08), 0 4px 12px rgba(243, 152, 24, 0.08);
  --sp-card-shadow-highlight: 0 0 20px rgba(247, 153, 56, 0.2);

  --sp-terminal-dot-close: #ff5f57;
  --sp-terminal-dot-minimize: #febc2e;
  --sp-terminal-dot-maximize: #28c840;

  --sp-syntax-bg: #f6f8fa;
  --sp-syntax-fg: #24292e;
  --sp-syntax-comment: #6a737d;
  --sp-syntax-keyword: #d73a49;
  --sp-syntax-string: #032f62;
  --sp-syntax-number: #005cc5;
  --sp-syntax-function: #6f42c1;
  --sp-syntax-variable: #e36209;
  --sp-syntax-operator: #005cc5;
  --sp-syntax-class: #6f42c1;

  --sp-color-hero-bg: #FEFCFA;
  --sp-color-mockup-chrome: #F5F0E8;
  --sp-color-mockup-chrome-border: #E8E4DD;
  --sp-color-chat-bubble-user: #F3F2F0;
  --sp-color-chat-bubble-ai: #FEF7F0;
  --sp-color-chat-bubble-ai-border: hsla(28, 60%, 80%, 0.5);
  --sp-color-brand-pill-bg: rgba(255, 255, 255, 0.7);
  --sp-color-header-bg: rgba(255, 255, 255, 0.92);
  --sp-color-header-border: rgba(231, 229, 228, 0.7);
  --sp-color-mockup-bg: #FAF7F2;
  --sp-color-mockup-sidebar: #F5F0E8;
  --sp-color-mockup-border: #E8E4DD;
  --sp-color-mockup-input: #FAF7F2;
  --sp-color-mockup-badge: #E8E4DD;
  --sp-color-final-cta-gradient: linear-gradient(180deg, #ffffff 0%, #FFFCF8 50%, hsla(28, 91%, 95%, 0.5) 100%);
  --sp-color-hiw-step-number: hsla(28, 91%, 55%, 0.12);
  --sp-color-hiw-badge-bg: hsla(28, 91%, 55%, 0.08);
  --sp-color-hiw-nav-active-bg: #E8F0FE;
  --sp-color-hiw-nav-active-text: #1A73E8;
  --sp-color-hiw-warning-bg: #FEF2F2;
  --sp-color-hiw-warning-border: #E8B4B4;
  --sp-color-hiw-warning-text: #7F1D1D;
  --sp-color-hiw-inline-code-bg: #E8E4DD;
  --sp-color-hiw-sync-btn-bg: #78716C;
}

[data-theme="dark"] {
  --sp-card-bg-glass: rgba(41, 37, 36, 0.8);
  --sp-card-bg-gradient: linear-gradient(135deg,
    hsla(28, 91%, 55%, 0.06) 0%,
    hsla(28, 60%, 55%, 0.03) 100%);
  --sp-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --sp-card-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(243, 152, 24, 0.1);
  --sp-card-shadow-highlight: 0 0 20px rgba(247, 153, 56, 0.25);

  --sp-syntax-bg: #292524;
  --sp-syntax-fg: #FAFAF9;
  --sp-syntax-comment: #A8A29E;
  --sp-syntax-keyword: #F87171;
  --sp-syntax-string: #93C5FD;
  --sp-syntax-number: #60A5FA;
  --sp-syntax-function: #C4B5FD;
  --sp-syntax-variable: #FDBA74;
  --sp-syntax-operator: #60A5FA;
  --sp-syntax-class: #C4B5FD;

  --sp-color-hero-bg: #1C1917;
  --sp-color-mockup-chrome: #292524;
  --sp-color-mockup-chrome-border: #44403C;
  --sp-color-chat-bubble-user: #292524;
  --sp-color-chat-bubble-ai: #2a2218;
  --sp-color-chat-bubble-ai-border: hsla(28, 60%, 30%, 0.5);
  --sp-color-brand-pill-bg: rgba(41, 37, 36, 0.7);
  --sp-color-header-bg: rgba(28, 25, 23, 0.92);
  --sp-color-header-border: rgba(68, 64, 60, 0.7);
  --sp-color-mockup-bg: #292524;
  --sp-color-mockup-sidebar: #1C1917;
  --sp-color-mockup-border: #44403C;
  --sp-color-mockup-input: #1C1917;
  --sp-color-mockup-badge: #44403C;
  --sp-color-final-cta-gradient: linear-gradient(180deg, #1C1917 0%, #1C1917 100%);
  --sp-color-hiw-step-number: hsla(28, 91%, 55%, 0.25);
  --sp-color-hiw-badge-bg: hsla(28, 91%, 55%, 0.15);
  --sp-color-hiw-nav-active-bg: hsla(217, 91%, 60%, 0.15);
  --sp-color-hiw-nav-active-text: #60A5FA;
  --sp-color-hiw-warning-bg: hsla(0, 62%, 50%, 0.1);
  --sp-color-hiw-warning-border: hsla(0, 40%, 50%, 0.3);
  --sp-color-hiw-warning-text: #FCA5A5;
  --sp-color-hiw-inline-code-bg: #44403C;
  --sp-color-hiw-sync-btn-bg: #57534E;
}