:root {
  /* Warm cream/beige — Aesop/MR PORTER эстетика */
  --c-bg: #F1EBE0;
  --c-bg-elevated: #FAF6EE;
  --c-bg-warm: #E8E0D1;
  --c-bg-deep: #DCD2BF;
  --c-bg-cream: #F7F3EA;

  /* Ink — тёплый угольный с подтоном */
  --c-ink: #1A1612;
  --c-ink-2: #2A2520;
  --c-ink-muted: #6B6358;
  --c-ink-soft: #A09687;

  /* Hairlines */
  --c-line: #D9D0BD;
  --c-line-strong: #BFB39C;

  /* Акцент — насыщенный «обожжённая глина» */
  --c-accent: #B8410E;
  --c-accent-ink: #7C2A07;
  --c-accent-soft: rgba(184, 65, 14, 0.08);
  --c-accent-warm: #CB6536;

  /* Тёмные секции — теплый эспрессо */
  --c-graphite: #1A1612;
  --c-graphite-soft: #2A2520;

  --c-success: #1E6A40;
  --c-warning: #B4761B;
  --c-danger: #A12B2B;

  /* Радиусы — мягкие, тёплые */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Тени — тёплые, мягкие */
  --shadow-hairline: 0 0 0 1px var(--c-line);
  --shadow-soft: 0 1px 2px rgba(26, 22, 18, .04), 0 2px 8px rgba(26, 22, 18, .06);
  --shadow-card: 0 2px 4px rgba(26, 22, 18, .04), 0 16px 32px -12px rgba(26, 22, 18, .14);
  --shadow-lift: 0 4px 8px rgba(26, 22, 18, .06), 0 28px 60px -20px rgba(26, 22, 18, .25);
  --shadow-modal: 0 40px 80px -20px rgba(26, 22, 18, .4), 0 0 0 1px rgba(26, 22, 18, .06);

  /* Шрифты */
  --font-display: 'Manrope', 'Helvetica Neue', system-ui, sans-serif;
  --font-text: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-serif: 'Newsreader', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Шаги (8px grid с тонкими подразделениями) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;
  --space-11: 200px;

  /* Контейнеры — шире */
  --container-max: 1440px;
  --container-narrow: 1040px;
  --container-tight: 760px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;

  --z-base: 1;
  --z-sticky: 50;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 200;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: local('Manrope'), url('../fonts/manrope-variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local('Inter'), url('../fonts/inter-variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: local('Newsreader Italic'), url('../fonts/newsreader-italic.woff2') format('woff2-variations');
}