:root {
  --theme-color-page: #F3EFEA;
  --theme-color-surface: #FCFAF7;
  --theme-color-surface-alt: #E7DED4;
  --theme-color-surface-dark: #111111;
  --theme-color-text: #1C1A18;
  --theme-color-text-muted: #625D57;
  --theme-color-text-on-dark: #F7F3EE;
  --theme-color-primary: #161616;
  --theme-color-primary-hover: #24201D;
  --theme-color-accent: #C24E24;
  --theme-color-accent-hover: #A8431F;
  --theme-color-border: #D1C6BB;
  --theme-color-success: #356B5A;
  --theme-color-error: #B63A32;
  --theme-color-focus: #3C7FC0;
  --theme-color-text-on-accent: #FFFFFF;

  --theme-font-body: "Segoe UI", system-ui, sans-serif;
  --theme-font-heading: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --theme-font-size-body: 1rem;
  --theme-font-weight-heading: 790;
  --theme-line-height-body: 1.56;
  --theme-line-height-heading: 1.02;

  --theme-radius-small: .38rem;
  --theme-radius-medium: .72rem;
  --theme-radius-large: 1rem;
  --theme-radius-button: .48rem;

  --theme-shadow-small: 0 6px 18px rgb(17 17 17 / .08);
  --theme-shadow-medium: 0 16px 38px rgb(17 17 17 / .13);
  --theme-shadow-large: 0 30px 72px rgb(0 0 0 / .34);

  --theme-motion-fast: 160ms;
  --theme-motion-normal: 260ms;
  --theme-motion-slow: 420ms;
  --theme-easing: cubic-bezier(.2, .8, .2, 1);
  --theme-border-width: 1px;

  --theme-header-background: rgb(14 14 14 / .97);
  --theme-header-text: #F7F3EE;
  --theme-header-border: #5A3524;
  --theme-header-blur: 16px;

  --theme-section-light-background: #F3EFEA;
  --theme-section-light-text: #1C1A18;
  --theme-section-surface-background: #FCFAF7;
  --theme-section-surface-text: #1C1A18;
  --theme-section-dark-background: linear-gradient(115deg, #0B0B0B 0%, #171310 58%, #0E0E0E 100%);
  --theme-section-dark-text: #F7F3EE;
  --theme-section-accent-background: linear-gradient(120deg, #2B1710 0%, #161210 50%, #101010 100%);
  --theme-section-accent-text: #F7F3EE;

  --theme-footer-background: #0C0C0C;
  --theme-footer-text: #F7F3EE;
  --theme-footer-muted: #B9B0A7;
  --theme-footer-border: #4B3024;

  --theme-card-background: #FFFFFF;
  --theme-card-text: #1C1A18;
  --theme-card-border: #D1C6BB;
  --theme-card-shadow: 0 10px 26px rgb(17 17 17 / .08);
  --theme-card-accent-background: linear-gradient(90deg, #C24E24, #D17B44 55%, #3C6E9D 100%);

  --theme-step-background: rgb(255 255 255 / .44);
  --theme-button-secondary-background: transparent;
  --theme-button-secondary-text: currentColor;
  --theme-button-secondary-border: currentColor;
  --theme-button-secondary-hover: rgb(194 78 36 / .10);

  --theme-answer-background: #FFFFFF;
  --theme-answer-selected-background: #F7E6DD;
  --theme-input-background: #FFFFFF;
  --theme-progress-track: rgb(255 255 255 / .20);

  --theme-error-background: #F9E7E3;
  --theme-success-background: #E8F1ED;
  --theme-warning-background: #FFF0DE;
  --theme-warning-text: #60401F;
  --theme-image-placeholder-background: #D9D0C7;

  --theme-hero-decoration: radial-gradient(circle at 10% 16%, rgb(194 78 36 / .27), transparent 34%), radial-gradient(circle at 38% 68%, rgb(209 123 68 / .10), transparent 28%), linear-gradient(120deg, rgb(255 255 255 / .025), transparent 48%);
  --theme-hero-decoration-opacity: 1;
  --theme-logo-filter: none;

  --theme-icon-background: rgb(194 78 36 / .10);
  --theme-icon-border: rgb(194 78 36 / .34);
  --theme-icon-radius: .55rem;
  --theme-focus-width: 3px;
  --theme-focus-offset: 3px;
}

.section--variant-dark,
.section--variant-accent {
  --theme-color-text: #F7F3EE;
  --theme-color-text-muted: #C7BFB7;
  --theme-text-muted-current: #C7BFB7;
  --theme-card-background: #171717;
  --theme-card-text: #F7F3EE;
  --theme-card-border: #4B3428;
  --theme-card-shadow: 0 14px 34px rgb(0 0 0 / .30);
  --theme-step-background: rgb(255 255 255 / .025);
  --theme-input-background: #121212;
  --theme-answer-background: #171717;
  --theme-answer-selected-background: #3A1F15;
  --theme-button-secondary-hover: rgb(255 255 255 / .07);
  --theme-progress-track: rgb(255 255 255 / .18);
  --theme-icon-background: rgb(194 78 36 / .13);
  --theme-icon-border: rgb(194 78 36 / .42);
}

.section--variant-light,
.section--variant-surface {
  --theme-text-muted-current: #625D57;
  --theme-card-background: #FCFAF7;
  --theme-card-text: #1C1A18;
  --theme-card-border: #D1C6BB;
  --theme-step-background: rgb(255 255 255 / .62);
  --theme-input-background: #FFFFFF;
  --theme-answer-background: #FFFFFF;
  --theme-answer-selected-background: #F7E6DD;
}
