/**
 * AnyPet design tokens — единый источник цветов и размеров.
 * Спецификация: docs/DESIGN-SYSTEM.md
 */
:root {
  /* Typography */
  --font-family-base: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-h2: 28px;
  --font-size-h1: 22px;
  --font-size-h4: 18px;
  --font-size-body: 16px;
  --font-size-sm: 14px;
  --line-height-body: 1.43;
  --line-height-heading: 1.43;

  /* Layout */
  --space-unit: 4px;
  --container-max: 1380px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 50px;

  /* Brand */
  --brand-slate: #3b4b65;
  --brand-blue: #688eaa;
  --brand-gold: #efbf90;
  --brand-bronze: #977a59;
  --brand-slate-dark: #273448;
  --brand-slate-darker: #1f2a3b;
  --brand-blue-dark: #55768f;
  --brand-bronze-dark: #7f674b;
  --brand-slate-light: #f0f4f7;
  --brand-blue-light: #e7eef3;
  --brand-blue-soft: #d8e3ea;
  --brand-gold-light: #fdf4ec;
  --brand-gold-soft: #f8e5d3;
  --brand-bronze-light: #f3ece5;
  --brand-bronze-soft: #e7d9ca;

  /* Surfaces */
  --surface-primary: #ffffff;
  --surface-secondary: #f8f9fb;
  --surface-tertiary: #f5f7f9;
  --surface-muted: #edf1f5;
  --surface-inverted: #3b4b65;

  /* Text */
  --text-primary: #3b4b65;
  --text-heading: #3b4b65;
  --text-secondary: #68758a;
  --text-muted: #98a2b3;
  --text-inverted: #ffffff;
  --text-link: #3b4b65;
  --text-link-hover: #55768f;

  /* Strokes */
  --stroke-primary: #dde3ea;
  --stroke-secondary: #e8ecf1;
  --stroke-strong: #c8d0da;
  --stroke-focused: #688eaa;

  /* Controls */
  --control-primary-default: #3b4b65;
  --control-primary-hover: #324158;
  --control-primary-active: #273448;
  --control-primary-disabled: #c8d0da;
  --control-secondary-default: #ffffff;
  --control-secondary-hover: #f0f4f7;
  --control-secondary-active: #e7eef3;
  --control-blue-default: #688eaa;
  --control-blue-hover: #5d819c;
  --control-blue-active: #55768f;
  --control-gold-default: #efbf90;
  --control-gold-hover: #d9a978;
  --control-gold-active: #c69465;

  /* Status */
  --fill-success: #2e8b57;
  --fill-success-light: #eaf6ef;
  --fill-warning: #c98224;
  --fill-warning-light: #fff4e5;
  --fill-error: #d14343;
  --fill-error-light: #fdecec;
  --fill-info: #688eaa;
  --fill-info-light: #e7eef3;

  /* Shadows */
  --shadow-card: rgba(59, 75, 101, 0.1) 0 4px 16px 0;
  --shadow-card-hover: rgba(59, 75, 101, 0.14) 0 8px 24px 0;
  --shadow-dropdown: rgba(39, 52, 72, 0.14) 0 12px 32px 0;
  --shadow-focus: 0 0 0 3px rgba(104, 142, 170, 0.28);

  /* Motion */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dark-surface-primary: #1f2a3b;
    --dark-surface-secondary: #273448;
    --dark-surface-tertiary: #324158;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #d8e3ea;
    --dark-stroke-primary: #465873;
    --dark-accent-primary: #efbf90;
    --dark-accent-secondary: #688eaa;
  }
}