:root {
  --gb-font-heading: "Outfit", "Segoe UI", system-ui, sans-serif;
  --gb-font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --gb-font-mono: "JetBrains Mono", Consolas, monospace;
  --gb-font-emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;

  --gb-weight-regular: 400;
  --gb-weight-medium: 500;
  --gb-weight-semibold: 600;
  --gb-weight-bold: 700;
  --gb-weight-heavy: 800;

  --gb-text-h1: 2.75rem;
  --gb-text-h2: 1.875rem;
  --gb-text-h3: 1.375rem;
  --gb-text-h4: 1.125rem;
  --gb-text-base: 1rem;
  --gb-text-sm: 0.875rem;
  --gb-text-xs: 0.75rem;
  --gb-text-2xs: 0.6875rem;

  --gb-leading-tight: 1.2;
  --gb-leading-snug: 1.35;
  --gb-leading-normal: 1.55;
  --gb-tracking-tight: -0.02em;

  --gb-space-0: 2px;
  --gb-space-1: 4px;
  --gb-space-2: 8px;
  --gb-space-3: 12px;
  --gb-space-4: 16px;
  --gb-space-5: 24px;
  --gb-space-6: 32px;
  --gb-space-7: 48px;
  --gb-space-8: 64px;

  --gb-radius-xs: 4px;
  --gb-radius-sm: 6px;
  --gb-radius-md: 12px;
  --gb-radius-lg: 18px;
  --gb-radius-btn: 10px;
  --gb-radius-pill: 999px;

  --gb-border-width: 1px;
  --gb-border-width-strong: 1.5px;
  --gb-border-width-thick: 2px;
  --gb-accent-bar-width: 5px;
  --gb-track-thickness: 3px;
  --gb-halo-width: 5px;
  --gb-underline-offset: 3px;

  --gb-focus-width: 3px;
  --gb-focus-offset: 2px;

  --gb-control-height: 44px;
  --gb-control-height-sm: 34px;
  --gb-icon-sm: 16px;
  --gb-icon-md: 20px;
  --gb-icon-lg: 24px;
  --gb-chevron-size: 6px;
  --gb-card-min-width: 280px;
  --gb-model-card-min-width: 280px;
  --gb-compare-column-width: 200px;
  --gb-search-width: 360px;

  --gb-sidebar-width: 256px;
  --gb-sidebar-width-collapsed: 72px;
  --gb-topbar-height: 64px;
  --gb-content-max-width: 1120px;
  --gb-content-wide-max-width: 1480px;
  --gb-chat-list-width: 248px;
  --gb-chat-settings-width: 300px;
  --gb-chat-column-max-width: 820px;
  --gb-thumbnail-size: 96px;
  --gb-gallery-tile-min-width: 180px;
  --gb-home-side-width: 320px;
  --gb-progress-ring-size: 64px;
  --gb-welcome-max-width: 880px;
  --gb-modal-wide-width: 960px;
  --gb-picker-max-height: 320px;
  --gb-demo-output-max-height: 380px;
  --gb-demo-prompts-width: 260px;
  --gb-demo-picture-max-width: 560px;
  --gb-tip-width: 300px;
  --gb-toast-width: 420px;
  --gb-modal-width: 480px;
  --gb-taste-chat-height: 560px;
  --gb-baker-card-min-width: 300px;
  --gb-avatar-tile-size: 44px;
  --gb-wizard-preview-max-height: 420px;
  --gb-source-panel-width: 440px;
  --gb-chunk-preview-max-height: 520px;
  --gb-recipe-node-width: 232px;
  --gb-recipe-port-size: 14px;
  --gb-recipe-number-size: 26px;
  --gb-recipe-palette-width: 232px;
  --gb-recipe-panel-width: 380px;
  --gb-recipe-drawer-height: 42vh;
  --gb-recipe-minimap-width: 150px;
  --gb-recipe-minimap-height: 100px;
  --gb-recipe-link-width: 2px;
  --gb-recipe-link-hit-width: 14px;
  --gb-recipe-link-dash: 6 4;
  --gb-recipe-ring-width: 3px;
  --gb-cookbook-card-min-width: 300px;
  --gb-cookbook-picture-ratio: 16 / 9;
  --gb-cookbook-wizard-max-width: 880px;
  --gb-lesson-max-width: 820px;
  --gb-glossary-term-width: 220px;
  --gb-progress-height: 8px;
  --gb-cookbook-hero-width: 320px;
  --gb-recipe-card-min-width: 320px;
  --gb-recipe-tour-width: 320px;
  --gb-recipe-pulse-duration: 1.4s;

  --gb-site-gutter: 16px;
  --gb-site-logo-height: 34px;
  --gb-site-hero-max-width: 820px;
  --gb-site-text-max-width: 640px;
  --gb-site-price-card-width: 460px;
  --gb-site-prose-max-width: 700px;
  --gb-site-oven-min-width: 160px;
  --gb-site-big-button-height: 56px;
  --gb-site-step-number-size: 40px;
  --gb-site-hero-title: clamp(2rem, 6vw, 3.25rem);
  --gb-site-section-title: clamp(1.5rem, 4vw, 1.875rem);

  --gb-telegram-verified: #3390EC;
  --gb-telegram-verified-contrast: #FFFFFF;
  --gb-telegram-avatar-size: 36px;

  --gb-duration-fast: 120ms;
  --gb-duration-normal: 200ms;
  --gb-duration-toast: 250ms;
  --gb-easing: cubic-bezier(0.2, 0, 0, 1);

  --gb-z-sticky: 10;
  --gb-z-panel: 30;
  --gb-z-tip: 40;
  --gb-z-toast: 60;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --gb-bg: #F7F8FC;
  --gb-surface: #FFFFFF;
  --gb-surface-2: #EEF0F8;
  --gb-text: #1E2240;
  --gb-text-muted: #565B7A;
  --gb-primary: #4B4FD6;
  --gb-primary-hover: #3A3EC0;
  --gb-primary-contrast: #FFFFFF;
  --gb-primary-soft: #E6E7FB;
  --gb-secondary: #3BB39A;
  --gb-secondary-text: #1D7A66;
  --gb-secondary-soft: #DDF4EE;
  --gb-accent: #FFD66B;
  --gb-accent-contrast: #1E2240;
  --gb-accent-soft: #FFF3CF;
  --gb-success: #1D7A66;
  --gb-success-soft: #DDF4EE;
  --gb-warning: #8A5F00;
  --gb-warning-soft: #FFF3CF;
  --gb-danger: #B42B40;
  --gb-danger-hover: #9A2235;
  --gb-danger-contrast: #FFFFFF;
  --gb-danger-soft: #FBE1E5;
  --gb-border: #E1E4F0;
  --gb-border-strong: #7C82A2;
  --gb-focus: #4B4FD6;
  --gb-overlay: rgba(30, 34, 64, 0.45);
  --gb-shadow-sm: 0 1px 2px rgba(30, 34, 64, 0.08), 0 2px 6px rgba(30, 34, 64, 0.05);
  --gb-shadow-md: 0 2px 4px rgba(30, 34, 64, 0.06), 0 10px 28px rgba(30, 34, 64, 0.10);
  --gb-shadow-lg: 0 4px 8px rgba(30, 34, 64, 0.08), 0 24px 56px rgba(30, 34, 64, 0.18);
}

@media (max-width: 1279px) {
  :root {
    --gb-recipe-palette-width: 200px;
    --gb-recipe-panel-width: 300px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --gb-bg: #18172C;
    --gb-surface: #222140;
    --gb-surface-2: #2B2A4D;
    --gb-text: #F0EFFF;
    --gb-text-muted: #B1AFD6;
    --gb-primary: #9A9CFF;
    --gb-primary-hover: #B3B4FF;
    --gb-primary-contrast: #18172C;
    --gb-primary-soft: #33326A;
    --gb-secondary: #5CD3B8;
    --gb-secondary-text: #6EDCC3;
    --gb-secondary-soft: #1E3B3A;
    --gb-accent: #FFD66B;
    --gb-accent-contrast: #18172C;
    --gb-accent-soft: #3F3622;
    --gb-success: #6EDCC3;
    --gb-success-soft: #1E3B3A;
    --gb-warning: #FFD66B;
    --gb-warning-soft: #3F3622;
    --gb-danger: #FF8A9A;
    --gb-danger-hover: #FFA6B2;
    --gb-danger-contrast: #18172C;
    --gb-danger-soft: #4A2232;
    --gb-border: #36355C;
    --gb-border-strong: #7472A8;
    --gb-focus: #FFD66B;
    --gb-overlay: rgba(8, 7, 20, 0.6);
    --gb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --gb-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
    --gb-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.5);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --gb-bg: #18172C;
  --gb-surface: #222140;
  --gb-surface-2: #2B2A4D;
  --gb-text: #F0EFFF;
  --gb-text-muted: #B1AFD6;
  --gb-primary: #9A9CFF;
  --gb-primary-hover: #B3B4FF;
  --gb-primary-contrast: #18172C;
  --gb-primary-soft: #33326A;
  --gb-secondary: #5CD3B8;
  --gb-secondary-text: #6EDCC3;
  --gb-secondary-soft: #1E3B3A;
  --gb-accent: #FFD66B;
  --gb-accent-contrast: #18172C;
  --gb-accent-soft: #3F3622;
  --gb-success: #6EDCC3;
  --gb-success-soft: #1E3B3A;
  --gb-warning: #FFD66B;
  --gb-warning-soft: #3F3622;
  --gb-danger: #FF8A9A;
  --gb-danger-hover: #FFA6B2;
  --gb-danger-contrast: #18172C;
  --gb-danger-soft: #4A2232;
  --gb-border: #36355C;
  --gb-border-strong: #7472A8;
  --gb-focus: #FFD66B;
  --gb-overlay: rgba(8, 7, 20, 0.6);
  --gb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --gb-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.35);
  --gb-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.5);
}