/* Дизайн-токены бьюти-студии «Ноготочки».

   Значения взяты из дизайн-системы прототипа:
   site/_ds/design-system-f8f42b07-6e0d-4d82-8a32-ad7612b73ea8/tokens/
   (colors.css, typography.css, spacing.css, elevation.css, motion.css, fonts.css).

   Ничего не придумано: каждое значение здесь есть в прототипе. Имена даны
   по смыслу — «основной текст», «фон», «граница», «кнопка», «ошибка», —
   а не по цвету: если завтра глина станет сливой, поменяется одна строка,
   а не пятьдесят мест в вёрстке.

   Палитра прототипа приведена к готовым значениям: в дизайн-системе
   --text-primary ссылается на --sand-900, здесь сразу #221D1A. Ступени
   палитры оставлены ниже — они нужны для оттенков, которых нет в готовых
   ролях (наведение, мягкие подложки).

   Чего в дизайн-системе нет и что поэтому не заведено:
     — тёмная тема;
     — цвет «информация» (синий): семантических цветов ровно три —
       успех, ожидание и ошибка;
     — цвет «предупреждение» отдельно от «ожидания»: это один цвет.
   Если понадобятся, значения нужно взять у дизайнера, а не подбирать. */

/* Шрифты. Файлы лежат в web/fonts и отдаются тем же сервером: страница
   не обращается к внешним серверам, а шрифты работают и без интернета. */
@import url("/fonts/fonts.css");

:root {
  /* ── Цвет: фоны и поверхности ─────────────────────────────────────────── */
  --color-bg: #FAF5F1;                    /* фон страницы */
  --color-bg-alt: #F4ECE5;                /* фон чередующейся секции */
  --color-bg-inverse: #33202A;            /* тёмная подложка: подвал, баннер */
  --color-surface: #FFFFFF;               /* карточка, поле ввода */
  --color-surface-sunken: #F4ECE5;        /* утопленный блок внутри карточки */
  --color-surface-accent: #FCF3EE;        /* мягкая акцентная подложка */
  --color-overlay: rgba(34, 29, 26, .44); /* затемнение под модалкой */

  /* ── Цвет: текст ──────────────────────────────────────────────────────── */
  --color-text: #221D1A;                  /* основной текст */
  --color-text-secondary: #5E5049;        /* пояснения, описания */
  --color-text-muted: #7D6D62;            /* подписи, мелкие детали */
  --color-text-disabled: #A4948A;          /* недоступное значение */
  --color-text-inverse: #FFFFFF;           /* текст на тёмной подложке */
  --color-text-link: #83432F;
  --color-text-link-hover: #653326;

  /* ── Цвет: границы ────────────────────────────────────────────────────── */
  --color-border-subtle: #F4ECE5;         /* разделитель внутри карточки */
  --color-border: #E8DCD2;                /* обычная граница */
  --color-border-strong: #D3C3B6;         /* граница поля в фокусе внимания */
  --color-border-accent: #E3AC93;

  /* ── Цвет: кнопка и действия ──────────────────────────────────────────── */
  --color-button: #A0553C;                /* основная кнопка */
  --color-button-hover: #83432F;
  --color-button-press: #653326;
  --color-button-text: #FFFFFF;           /* текст на основной кнопке */
  --color-button-soft: #FCF3EE;           /* второстепенная кнопка */
  --color-button-soft-hover: #F7E4DA;
  --color-focus-ring: rgba(160, 85, 60, .38);

  /* ── Цвет: состояния ──────────────────────────────────────────────────── */
  --color-success: #2F5A42;               /* успех: запись подтверждена */
  --color-success-bg: #ECF2ED;
  --color-success-border: #C6DBCD;

  --color-pending: #6F4B0F;               /* ожидание: ждёт подтверждения */
  --color-pending-bg: #FBF2E2;
  --color-pending-border: #EDD9AE;

  --color-error: #7C2036;                 /* ошибка и отмена */
  --color-error-bg: #F9ECEE;
  --color-error-border: #E8C4CC;

  --color-done: #5E5049;                  /* визит состоялся, действие закрыто */
  --color-done-bg: #F4ECE5;
  --color-done-border: #E8DCD2;

  /* ── Цвет: окна времени ───────────────────────────────────────────────── */
  --color-slot-free-bg: #FFFFFF;
  --color-slot-free-border: #E8DCD2;
  --color-slot-free-text: #221D1A;
  --color-slot-busy-bg: #F4ECE5;
  --color-slot-busy-border: transparent;
  --color-slot-busy-text: #A4948A;
  --color-slot-selected-bg: #A0553C;
  --color-slot-selected-border: #A0553C;
  --color-slot-selected-text: #FFFFFF;

  /* ── Ступени палитры ──────────────────────────────────────────────────── */
  /* Нужны там, где готовой роли нет: оттенок при наведении, мягкая заливка. */
  --palette-clay-50: #FCF3EE;  --palette-clay-100: #F7E4DA; --palette-clay-200: #EFCCBB;
  --palette-clay-300: #E3AC93; --palette-clay-400: #D08A6B; --palette-clay-500: #B96C4C;
  --palette-clay-600: #A0553C; --palette-clay-700: #83432F; --palette-clay-800: #653326;
  --palette-clay-900: #47251C;

  --palette-plum-500: #754C60; --palette-plum-600: #5C3A4B; --palette-plum-700: #472C3A;
  --palette-plum-800: #33202A; --palette-plum-900: #23161D;

  --palette-sand-0: #FFFFFF;   --palette-sand-25: #FDFAF8;  --palette-sand-50: #FAF5F1;
  --palette-sand-100: #F4ECE5; --palette-sand-200: #E8DCD2; --palette-sand-300: #D3C3B6;
  --palette-sand-400: #A4948A; --palette-sand-500: #7D6D62; --palette-sand-600: #5E5049;
  --palette-sand-700: #453B35; --palette-sand-800: #302925; --palette-sand-900: #221D1A;

  /* ── Градиенты ────────────────────────────────────────────────────────── */
  --gradient-clay: linear-gradient(135deg, #C4785A 0%, #A0553C 55%, #83432F 100%);
  --gradient-plum: linear-gradient(160deg, #5C3A4B 0%, #33202A 100%);
  --gradient-cream: linear-gradient(180deg, #FDFAF8 0%, #F4ECE5 100%);
  --gradient-nude: linear-gradient(140deg, #F7E4DA 0%, #E3AC93 48%, #D08A6B 100%);

  /* ── Шрифты ───────────────────────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-text: "Manrope", "Helvetica Neue", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* ── Размеры текста (мобильные; ниже десктопная ступень) ──────────────── */
  --text-display: 2.75rem;   /* 44px — крупный заголовок первого экрана */
  --text-h1: 2.125rem;       /* 34px */
  --text-h2: 1.625rem;       /* 26px */
  --text-h3: 1.25rem;        /* 20px */
  --text-h4: 1.0625rem;      /* 17px */
  --text-lg: 1.0625rem;      /* 17px — крупный абзац */
  --text-base: 0.9375rem;    /* 15px — основной размер */
  --text-sm: 0.8125rem;      /* 13px */
  --text-caption: 0.75rem;   /* 12px — подписи */
  --text-overline: 0.6875rem;/* 11px — надзаголовки капсом */

  /* ── Интерлиньяж, насыщенность, трекинг ───────────────────────────────── */
  --line-tight: 1.12;
  --line-heading: 1.22;
  --line-snug: 1.35;
  --line-body: 1.6;
  --line-relaxed: 1.7;

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

  --tracking-display: -0.015em;
  --tracking-heading: -0.005em;
  --tracking-body: 0;
  --tracking-caption: 0.01em;
  --tracking-overline: 0.14em;

  /* ── Отступы. База 4px ────────────────────────────────────────────────── */
  --space-0: 0;     --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px; --space-14: 56px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  /* ── Раскладка ────────────────────────────────────────────────────────── */
  --gutter: 20px;              /* поля экрана на телефоне */
  --gutter-desktop: 40px;
  --container-max: 1200px;
  --container-narrow: 760px;
  --gap-cards: 12px;           /* зазор между карточками списка */
  --gap-section: 40px;         /* между секциями экрана */
  --gap-section-desktop: 96px;

  /* ── Размеры контролов ────────────────────────────────────────────────── */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --control-xl: 56px;
  --tap-min: 44px;             /* минимальная зона нажатия */
  --height-top-bar: 56px;
  --height-bottom-nav: 64px;
  --height-slot: 44px;

  /* ── Скругления и границы ─────────────────────────────────────────────── */
  --radius-xs: 8px;   --radius-sm: 12px;  --radius-md: 16px;
  --radius-lg: 20px;  --radius-xl: 24px;  --radius-2xl: 32px;
  --radius-3xl: 40px; --radius-pill: 999px; --radius-circle: 50%;

  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ── Тени ─────────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(58, 38, 28, .05);
  --shadow-sm: 0 2px 8px -2px rgba(58, 38, 28, .08);
  --shadow-md: 0 10px 24px -12px rgba(58, 38, 28, .18);
  --shadow-lg: 0 24px 48px -20px rgba(58, 38, 28, .22);
  --shadow-button: 0 10px 22px -10px rgba(160, 85, 60, .55);
  --shadow-nav: 0 -8px 24px -16px rgba(58, 38, 28, .28);

  /* ── Движение ─────────────────────────────────────────────────────────── */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-sheet: 380ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --ease-in-soft: cubic-bezier(.4, 0, 1, 1);
  --press-scale: 0.98;
  --lift: -1px;
}

/* Десктопная ступень: с 900px заголовки крупнее. Значения из прототипа. */
@media (min-width: 900px) {
  :root {
    --text-display: 4.5rem;  /* 72px */
    --text-h1: 3.25rem;      /* 52px */
    --text-h2: 2.375rem;     /* 38px */
    --text-h3: 1.625rem;     /* 26px */
  }
}

/* Человек попросил систему не анимировать — уважаем. Значения из прототипа. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-sheet: 0ms;
    --press-scale: 1;
    --lift: 0px;
  }
}