/*
 * tokens.css — Design Tokens (MEBELSHOP)
 *
 * Источник: макет Claude Design «Матрасы и мебель MEBELSHOP»
 * (design/handoff/project/main.dc.html). Значения взяты из макета один в один.
 *
 * Логика палитры: бирюза — интерфейс и навигация (спокойный, «чистый» цвет,
 * уместный для темы сна), розовый — только цена и главный призыв к действию,
 * поэтому взгляд всегда находит их первыми. Фон холодно-белый, карточки
 * держатся на мягкой тени, а не на рамках.
 *
 * Mobile-first. Тёмная тема не используется.
 */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;1,6..12,400&family=Rubik:wght@400;500;600;700&display=swap');

:root {

  /* ─── Palette: Brand (бирюза — интерфейс) ───────────────────── */
  --c-brand-50:  #DDF0F1;   /* мягкая заливка кнопки «В корзину» */
  --c-brand-100: #CFE6E9;   /* её же hover */
  --c-brand-200: #C6E1E6;
  --c-brand-300: #9BCDD3;
  --c-brand-400: #4FA3AC;
  --c-brand-500: #14808C;   /* основной бирюзовый */
  --c-brand-600: #0F6773;   /* hover и текст на светлой заливке */
  --c-brand-650: #0B5F69;
  --c-brand-700: #0C525C;
  --c-brand-800: #093E45;
  --c-brand-900: #06292E;

  /* ─── Palette: Accent / CTA (розовый — цена и покупка) ──────── */
  --c-accent-50:  #FCE6EE;
  --c-accent-100: #F2D5E1;
  --c-accent-200: #E9B4C8;
  --c-accent-300: #DA8BA8;
  --c-accent-400: #CE6B90;
  --c-accent-500: #C1547E;   /* цена, «Купить в 1 клик» */
  --c-accent-600: #A9456C;   /* hover */
  --c-accent-650: #96395C;
  --c-accent-700: #8C3757;
  --c-accent-800: #6E2A44;
  --c-accent-900: #4F1D30;

  /* ─── Palette: Neutral (холодная серая шкала) ───────────────── */
  --c-neutral-0:   #FFFFFF;
  --c-neutral-50:  #E4EFEF;   /* фон страницы */
  --c-neutral-100: #ECF1F2;   /* приглушённая заливка, поля поиска */
  --c-neutral-200: #E4EBEC;   /* светлая линия */
  --c-neutral-300: #DCE7E8;   /* рамка */
  --c-neutral-400: #CBDADC;   /* рамка поля ввода */
  --c-neutral-500: #8A9698;   /* самый бледный текст */
  --c-neutral-600: #6E7B7D;   /* подписи, мета */
  --c-neutral-700: #4A5558;   /* основной приглушённый текст */
  --c-neutral-800: #2C3739;
  --c-neutral-900: #1A2224;   /* текст */

  /* ─── Градиенты (обновлённый макет) ─────────────────────────
     Плоские заливки заменены мягкими диагональными переходами:
     плитки перестали выглядеть аппликацией и получили объём.        */
  --grad-teal:  linear-gradient(150deg, var(--c-brand-50) 0%, var(--c-brand-200) 100%);
  --grad-rose:  linear-gradient(150deg, var(--c-accent-50) 0%, var(--c-accent-100) 100%);
  --grad-gold:  linear-gradient(150deg, var(--c-warning-bg) 0%, #F5E3BD 100%);
  --grad-green: linear-gradient(150deg, var(--c-success-bg) 0%, #D6E5D1 100%);
  --grad-page:  linear-gradient(176deg, #E7F2F2 0%, #E4EFEF 42%, #EFE7EC 100%);
  --grad-hero:  linear-gradient(150deg, #14545C 0%, #1A6670 55%, #3A4C63 100%);
  --grad-quiz:  linear-gradient(160deg, #DCEEF0 0%, #CFE6E9 55%, #E4DDE6 100%);

  /* Фон главной: один переход на всю высоту страницы, а не на окно.
     Сверху бирюза под первым экраном, к середине — розово-лиловый
     у хитов, ниже тёплый у подбора, у подвала снова бирюза. Так длинная
     страница читается как одно полотно, а не стопка полос. */
  --grad-home: linear-gradient(180deg,
                 #D3E9EA 0%,
                 #DCE8F0 24%,
                 #EEDCE8 48%,
                 #F6E7CF 72%,
                 #D9EAEA 100%);
  /* Мягкие пятна света поверх — дают глубину, чтобы фон не был плоским.
     Цвета те же, что у бренда: бирюза, розовый, охра. */
  --glow-teal: radial-gradient(62rem 40rem at 4% 10%, rgba(20, 128, 140, 0.26), transparent 64%);
  --glow-rose: radial-gradient(56rem 38rem at 98% 40%, rgba(193, 84, 126, 0.22), transparent 64%);
  --glow-gold: radial-gradient(58rem 38rem at 6% 74%, rgba(150, 112, 26, 0.20), transparent 64%);
  --glow-mint: radial-gradient(48rem 34rem at 92% 88%, rgba(58, 102, 56, 0.16), transparent 64%);

  /* ─── Palette: Status ───────────────────────────────────────── */
  --c-success:     #3A6638;
  --c-success-bg:  #E7F2E3;
  --c-error:       #C0392B;
  --c-error-bg:    #FDECEA;
  --c-warning:     #835F12;
  --c-warning-bg:  #FDF1D8;
  --c-info:        #0F6773;
  --c-info-bg:     #DDF0F1;

  /* ─── Semantic Color Tokens ─────────────────────────────────── */
  --color-bg:           var(--c-neutral-50);
  --color-surface:      var(--c-neutral-0);
  --color-surface-alt:  var(--c-neutral-100);
  --color-border:       var(--c-neutral-200);
  --color-border-light: var(--c-neutral-100);

  /* В макете три ступени приглушённого текста: абзацы, мета и самая
     бледная подпись. Держим их раздельно, иначе карточки «сереют». */
  --color-text:         var(--c-neutral-900);
  --color-text-muted:   var(--c-neutral-700);
  --color-text-subtle:  var(--c-neutral-600);
  --color-text-faint:   var(--c-neutral-500);
  --color-text-inverse: var(--c-neutral-0);

  --color-primary:         var(--c-brand-500);
  --color-primary-hover:   var(--c-brand-600);
  --color-primary-active:  var(--c-brand-700);
  --color-primary-subtle:  var(--c-brand-50);
  --color-primary-text:    var(--c-neutral-0);

  --color-cta:         var(--c-accent-500);
  --color-cta-hover:   var(--c-accent-600);
  --color-cta-active:  var(--c-accent-700);
  --color-cta-subtle:  var(--c-accent-50);
  --color-cta-text:    var(--c-neutral-0);

  /* Цена в макете набрана акцентом, а не цветом текста — это её главный
     опознавательный знак в каталоге. */
  --color-price:       var(--c-accent-500);
  --color-input-border: var(--c-neutral-400);

  --color-success:      var(--c-success);
  --color-success-bg:   var(--c-success-bg);
  --color-error:        var(--c-error);
  --color-error-bg:     var(--c-error-bg);
  --color-warning:      var(--c-warning);
  --color-warning-bg:   var(--c-warning-bg);

  /* ─── Typography ────────────────────────────────────────────── */
  --font-heading: 'Rubik', system-ui, sans-serif;
  --font-body:    'Nunito Sans', system-ui, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Scale (mobile-first; rem = 16px base) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.0625rem; /* 17px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

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

  --lh-tight:   1.25;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;

  /* ─── Spacing (4/8-based) ───────────────────────────────────── */
  --sp-0:   0;
  --sp-1:   0.25rem;  /* 4px */
  --sp-2:   0.5rem;   /* 8px */
  --sp-3:   0.75rem;  /* 12px */
  --sp-4:   1rem;     /* 16px */
  --sp-5:   1.25rem;  /* 20px */
  --sp-6:   1.5rem;   /* 24px */
  --sp-8:   2rem;     /* 32px */
  --sp-10:  2.5rem;   /* 40px */
  --sp-12:  3rem;     /* 48px */
  --sp-14:  3.5rem;   /* 56px */
  --sp-16:  4rem;     /* 64px */
  --sp-20:  5rem;     /* 80px */
  --sp-24:  6rem;     /* 96px */
  --sp-32:  8rem;     /* 128px */

  /* ─── Border Radius ─────────────────────────────────────────── */
  /* Скругления макета: кнопки 12–14, карточки 18, крупные панели 20–24. */
  --r-none: 0;
  --r-sm:   0.25rem;   /* 4px  */
  --r-md:   0.75rem;   /* 12px — мелкие кнопки, миниатюры */
  --r-lg:   0.875rem;  /* 14px — кнопки и поля ввода */
  --r-xl:   1.125rem;  /* 18px — карточки товара */
  --r-2xl:  1.25rem;   /* 20px — галерея, боковой фильтр */
  --r-3xl:  1.5rem;    /* 24px — крупные панели и баннеры */
  --r-full: 9999px;

  /* ─── Shadows ───────────────────────────────────────────────── */
  /* Тени макета мягкие и почти плоские — именно они, а не рамки,
     отделяют карточку от фона. */
  --shadow-xs:  0 1px 2px rgba(26,34,36,0.06);
  --shadow-sm:  0 1px 4px rgba(26,34,36,0.08);
  --shadow-md:  0 2px 10px rgba(26,34,36,0.07);
  --shadow-lg:  0 8px 24px rgba(26,34,36,0.10);
  --shadow-xl:  0 20px 40px rgba(26,34,36,0.12);
  --shadow-inner: inset 0 2px 4px rgba(26,34,36,0.06);

  /* ─── Transitions ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1.0, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);

  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   350ms;

  --transition-base: all var(--dur-fast) var(--ease-out);
  --transition-color: color var(--dur-fast) var(--ease-out),
                      background-color var(--dur-fast) var(--ease-out),
                      border-color var(--dur-fast) var(--ease-out);

  /* ─── Z-index Scale ─────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ─── Breakpoints (используются в медиазапросах) ────────────── */
  /* sm:  480px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1440px */

  /* ─── Layout ────────────────────────────────────────────────── */
  --container-max:       1280px;
  --container-padding:   var(--sp-4);       /* mobile */
  --header-height:       60px;
  --header-height-desk:  72px;
  --sidebar-width:       260px;
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--sp-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--sp-8);
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-normal: 0ms;
    --dur-slow:   0ms;
  }
}