/* Appointment Design System — tokens.css
 * Снежинка (холодная светлая) + Пляж (тёплая тёмная). Accent — терракотовое солнце #C2410C.
 * Source of truth: web/design-system/tokens.json
 */

:root {
  /* Neutral (cold slate — снежинка) */
  --ds-neutral-0: #F1F5F8;
  --ds-neutral-1: #E6ECF1;
  --ds-neutral-2: #D8E0E8;
  --ds-neutral-3: #BCC8D4;
  --ds-neutral-4: #8494A5;
  --ds-neutral-5: #55677A;
  --ds-neutral-6: #354354;
  --ds-neutral-7: #1F2A37;
  --ds-neutral-8: #121A23;

  /* Accent — терракотовое солнце */
  --ds-accent-050: #FBE9DC;
  --ds-accent-400: #D96A3B;
  --ds-accent-500: #C2410C;
  --ds-accent-600: #9A3412;
  --ds-accent-700: #7C2D12;

  /* Semantics (distinct from accent) */
  --ds-success-050: #E9F3EC;
  --ds-success-500: #3D7A4E;
  --ds-warning-050: #FBF0E1;
  --ds-warning-500: #B26A00;
  --ds-danger-050: #FAE9E5;
  --ds-danger-500: #B3452F;
  --ds-info-050: #E8F0F5;
  --ds-info-500: #2F6F8F;

  --ds-on-accent: #FFFFFF;
  --ds-black-soft: rgba(18, 26, 35, 1);

  /* Typography */
  --ds-font-sans: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ds-font-xs: 12px;
  --ds-font-sm: 14px;
  --ds-font-md: 16px;
  --ds-font-lg: 18px;
  --ds-font-xl: 24px;
  --ds-font-xxl: 32px;
  --ds-lh-tight: 1.2;
  --ds-lh-base: 1.4;
  --ds-lh-loose: 1.5;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-weight-extra: 800;
  --ds-track-headline: -0.02em;
  --ds-track-title: -0.015em;
  --ds-track-subtitle: -0.01em;
  --ds-track-body: 0;

  /* Spacing (8pt) */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;

  /* Radius */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-full: 9999px;

  /* Borders */
  --ds-border-hairline: 1px;
  --ds-border-strong: 2px;

  /* Shadows (max 2 levels) */
  --ds-shadow-1: 0 1px 2px rgba(18, 26, 35, 0.06), 0 1px 3px rgba(18, 26, 35, 0.04);
  --ds-shadow-2: 0 4px 12px rgba(18, 26, 35, 0.10), 0 2px 4px rgba(18, 26, 35, 0.06);

  /* Motion */
  --ds-motion-fast: 120ms;
  --ds-motion-base: 200ms;
  --ds-motion-slow: 300ms;
  --ds-ease-in: cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-out: cubic-bezier(0.4, 0, 1, 1);

  /* Focus */
  --ds-focus-width: 2px;
  --ds-focus-offset: 2px;

  /* Semantic roles (light theme default) */
  --ds-bg: var(--ds-neutral-0);
  --ds-surface: #FFFFFF;
  --ds-surface-2: var(--ds-neutral-1);
  --ds-text: var(--ds-neutral-7);
  --ds-heading: var(--ds-neutral-8);
  --ds-muted: var(--ds-neutral-5);
  --ds-faint: var(--ds-neutral-4);
  --ds-border: var(--ds-neutral-3);
  --ds-border-strong: var(--ds-neutral-4);
  --ds-accent: var(--ds-accent-500);
  --ds-accent-hover: var(--ds-accent-600);
  --ds-on-accent: #FFFFFF;
  --ds-success: var(--ds-success-500);
  --ds-warning: var(--ds-warning-500);
  --ds-danger: var(--ds-danger-500);
  --ds-info: var(--ds-info-500);
}

:root {
  /* Тёплый пляж — закат */
  --ds-neutral-dark-0: #161210;
  --ds-neutral-dark-1: #1F1A15;
  --ds-neutral-dark-2: #2A231C;
  --ds-neutral-dark-3: #3A3128;
  --ds-neutral-dark-4: #655C4F;
  --ds-neutral-dark-5: #9A8D7A;
  --ds-neutral-dark-6: #BCAF99;
  --ds-neutral-dark-7: #E3D9C8;
  --ds-neutral-dark-8: #F7F1E6;
  /* Закатный акцент для тёмной темы */
  --ds-accent-dark-050: #3A2417;
  --ds-accent-dark-400: #E8823F;
  --ds-accent-dark-500: #EE9A5B;
  --ds-accent-dark-600: #F2B183;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ds-bg: var(--ds-neutral-dark-0);
    --ds-surface: var(--ds-neutral-dark-1);
    --ds-surface-2: var(--ds-neutral-dark-2);
    --ds-text: var(--ds-neutral-dark-7);
    --ds-heading: var(--ds-neutral-dark-8);
    --ds-muted: var(--ds-neutral-dark-5);
    --ds-faint: var(--ds-neutral-dark-4);
    --ds-border: var(--ds-neutral-dark-3);
    --ds-border-strong: var(--ds-neutral-dark-4);
    --ds-accent: var(--ds-accent-dark-500);
    --ds-accent-hover: var(--ds-accent-dark-600);
    --ds-accent-050: var(--ds-accent-dark-050);
    --ds-on-accent: #2A1404;
  }
}

/* ---- Cold scheme (морская): светлая marine + тёмная navy ---- */
:root {
  --ds-accent-cold-050: #DDF5E9;
  --ds-accent-cold-400: #2BBF8A;
  --ds-accent-cold-500: #00755A;
  --ds-accent-cold-600: #005C47;
  --ds-accent-cold-700: #04402F;
  --ds-accent-cold-dark-050: #0B2E25;
  --ds-accent-cold-dark-400: #2BBF8A;
  --ds-accent-cold-dark-500: #5FE3A8;
  --ds-accent-cold-dark-600: #93F2C6;
  --ds-neutral-cold-dark-0: #0A1420;
  --ds-neutral-cold-dark-1: #0E1A29;
  --ds-neutral-cold-dark-2: #14233A;
  --ds-neutral-cold-dark-3: #1E3350;
  --ds-neutral-cold-dark-4: #3D5473;
  --ds-neutral-cold-dark-5: #6B84A3;
  --ds-neutral-cold-dark-6: #9DB4CE;
  --ds-neutral-cold-dark-7: #D3E2F2;
  --ds-neutral-cold-dark-8: #F0F6FC;
}

/* Cold + light: только акцент морской, нейтрали и так холодные */
:root[data-ds-scheme="cold"] {
  --ds-accent-050: var(--ds-accent-cold-050);
  --ds-accent-400: var(--ds-accent-cold-400);
  --ds-accent-500: var(--ds-accent-cold-500);
  --ds-accent-600: var(--ds-accent-cold-600);
  --ds-accent-700: var(--ds-accent-cold-700);
}

@media (prefers-color-scheme: dark) {
  :root[data-ds-scheme="cold"] {
    --ds-bg: var(--ds-neutral-cold-dark-0);
    --ds-surface: var(--ds-neutral-cold-dark-1);
    --ds-surface-2: var(--ds-neutral-cold-dark-2);
    --ds-text: var(--ds-neutral-cold-dark-7);
    --ds-heading: var(--ds-neutral-cold-dark-8);
    --ds-muted: var(--ds-neutral-cold-dark-5);
    --ds-faint: var(--ds-neutral-cold-dark-4);
    --ds-border: var(--ds-neutral-cold-dark-3);
    --ds-border-strong: var(--ds-neutral-cold-dark-4);
    --ds-accent: var(--ds-accent-cold-dark-500);
    --ds-accent-hover: var(--ds-accent-cold-dark-600);
    --ds-accent-050: var(--ds-accent-cold-dark-050);
    --ds-on-accent: #03231A;
  }
}

/* Cold + dark manual */
html[data-ds-theme="dark"][data-ds-scheme="cold"],
[data-bs-theme="dark"][data-ds-scheme="cold"] {
  --ds-bg: var(--ds-neutral-cold-dark-0);
  --ds-surface: var(--ds-neutral-cold-dark-1);
  --ds-surface-2: var(--ds-neutral-cold-dark-2);
  --ds-text: var(--ds-neutral-cold-dark-7);
  --ds-heading: var(--ds-neutral-cold-dark-8);
  --ds-muted: var(--ds-neutral-cold-dark-5);
  --ds-faint: var(--ds-neutral-cold-dark-4);
  --ds-border: var(--ds-neutral-cold-dark-3);
  --ds-border-strong: var(--ds-neutral-cold-dark-4);
  --ds-accent: var(--ds-accent-cold-dark-500);
  --ds-accent-hover: var(--ds-accent-cold-dark-600);
  --ds-accent-050: var(--ds-accent-cold-dark-050);
  --ds-on-accent: #03231A;
}

/* Manual dark toggle: html[data-ds-theme="dark"] + Bootstrap bridge */
html[data-ds-theme="dark"],
[data-bs-theme="dark"] {
  --ds-bg: var(--ds-neutral-dark-0);
  --ds-surface: var(--ds-neutral-dark-1);
  --ds-surface-2: var(--ds-neutral-dark-2);
  --ds-text: var(--ds-neutral-dark-7);
  --ds-heading: var(--ds-neutral-dark-8);
  --ds-muted: var(--ds-neutral-dark-5);
  --ds-faint: var(--ds-neutral-dark-4);
  --ds-border: var(--ds-neutral-dark-3);
  --ds-border-strong: var(--ds-neutral-dark-4);
  --ds-accent: var(--ds-accent-dark-500);
  --ds-accent-hover: var(--ds-accent-dark-600);
  --ds-accent-050: var(--ds-accent-dark-050);
  --ds-on-accent: #2A1404;
  color-scheme: dark;
}

/* ---- Utilities ---- */
.ds-num {
  font-variant-numeric: tabular-nums;
}

.ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  color: var(--ds-heading);
  font-weight: var(--ds-weight-bold);
}

.ds-h1 { font-size: var(--ds-font-xxl); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-track-headline); }
.ds-h2 { font-size: var(--ds-font-xl); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-track-title); }
.ds-h3 { font-size: var(--ds-font-lg); line-height: var(--ds-lh-base); letter-spacing: var(--ds-track-subtitle); }
.ds-h4 { font-size: var(--ds-font-md); line-height: var(--ds-lh-base); letter-spacing: var(--ds-track-subtitle); }

.ds-text-sm { font-size: var(--ds-font-sm); }
.ds-text-xs { font-size: var(--ds-font-xs); }
.ds-muted { color: var(--ds-muted); }
.ds-faint { color: var(--ds-faint); }

/* Accessible focus ring for custom controls */
.ds-focus-visible:focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-accent);
  outline-offset: var(--ds-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}