/* ============================================================
   Material Design 3 — design tokens
   Автошкола «ДОРИТ». Жёлтая тема: базовый цвет #f3e215.
   ============================================================ */

:root {
  /* --- Фирменный жёлтый --- */
  --md-ref-brand: #f3e215;

  /* --- Светлая тема: цветовые роли MD3 --- */
  /* Primary = фирменный жёлтый. Текст на нём — почти чёрный. */
  --md-sys-color-primary: #f3e215;
  --md-sys-color-on-primary: #201d00;
  --md-sys-color-primary-container: #fff6b0;
  --md-sys-color-on-primary-container: #221f00;

  /* Ссылки и акценты — тёмный «янтарь» для контраста на светлом фоне */
  --md-sys-color-link: #6d5e00;

  /* Secondary — тёплый нейтральный */
  --md-sys-color-secondary: #67602f;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #efe6a6;
  --md-sys-color-on-secondary-container: #201c00;

  --md-sys-color-tertiary: #b3261e;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffdad6;
  --md-sys-color-on-tertiary-container: #410e0b;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  /* Поверхности — с тёплым жёлтым отливом */
  --md-sys-color-background: #fdfaf0;
  --md-sys-color-on-background: #1d1c16;
  --md-sys-color-surface: #fdfaf0;
  --md-sys-color-on-surface: #1d1c16;
  --md-sys-color-surface-variant: #e9e2c8;
  --md-sys-color-on-surface-variant: #4a4736;
  --md-sys-color-outline: #7b775f;
  --md-sys-color-outline-variant: #cdc7a8;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f6f3e8;
  --md-sys-color-surface-container: #f1ede1;
  --md-sys-color-surface-container-high: #ebe8db;
  --md-sys-color-surface-container-highest: #e5e2d5;
  --md-sys-color-inverse-surface: #32302a;
  --md-sys-color-inverse-on-surface: #f5f1e6;

  /* --- Типографика MD3 --- */
  --md-sys-typescale-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Форма --- */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* --- Elevation --- */
  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .3);

  /* --- Layout --- */
  --md-layout-max-width: 1200px;
  --md-layout-gutter: 16px;
}

/* Тёмная тема — включается автоматически */
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #f3e215;
    --md-sys-color-on-primary: #201d00;
    --md-sys-color-primary-container: #4f4700;
    --md-sys-color-on-primary-container: #fff6b0;
    --md-sys-color-link: #f3e215;

    --md-sys-color-secondary: #d3ca8e;
    --md-sys-color-on-secondary: #353100;
    --md-sys-color-secondary-container: #4d4800;
    --md-sys-color-on-secondary-container: #efe6a6;

    --md-sys-color-background: #14140e;
    --md-sys-color-on-background: #e6e2d6;
    --md-sys-color-surface: #14140e;
    --md-sys-color-on-surface: #e6e2d6;
    --md-sys-color-surface-variant: #4a4736;
    --md-sys-color-on-surface-variant: #cdc7a8;
    --md-sys-color-outline: #96917a;
    --md-sys-color-outline-variant: #4a4736;
    --md-sys-color-surface-container-lowest: #0f0f09;
    --md-sys-color-surface-container-low: #1d1c16;
    --md-sys-color-surface-container: #211f19;
    --md-sys-color-surface-container-high: #2b2a22;
    --md-sys-color-surface-container-highest: #36352c;
  }
}