/* ==========================================================================
   Design Tokens — единый источник истины для брендинга mcakes
   ========================================================================== */

:root {
  /* === BRAND (mcakes orange — сохраняется) ============================== */
  --color-primary:     #F6623E;
  --color-primary-50:  #FFF1EB;
  --color-primary-100: #FFD9C9;
  --color-primary-200: #FFB496;
  --color-primary-300: #FB8E64;
  --color-primary-400: #F77554;
  --color-primary-500: #F6623E;
  --color-primary-600: #E14D2A;
  --color-primary-700: #B83918;
  --color-primary-on:  #FFFFFF;

  /* === ROSE-GOLD ACCENT (расширение бренда) ============================= */
  --color-rose-50:  #FBF2F1;
  --color-rose-100: #F4DDD9;
  --color-rose-300: #DAA89F;
  --color-rose-500: #BC8D88;
  --color-rose-700: #8E6660;

  /* === STATUS =========================================================== */
  --color-success:    #669F73;
  --color-success-50: #EFF7F1;
  --color-warn:       #F6B23E;
  --color-warn-50:    #FFF6E5;
  --color-danger:     #DC3545;
  --color-danger-50:  #FCEDEE;
  --color-info:       #4A90E2;
  --color-info-50:    #ECF3FB;

  /* === NEUTRALS ========================================================= */
  --color-bg:           #FFFFFF;
  --color-bg-cream:     #FFFAF6;
  --color-bg-peach:     #FFF1EB;
  --color-bg-light:     #F8F9FA;
  --color-bg-dark:      #1F1B1A;
  --color-bg-dark-card: #2A2624;

  --color-text:            #221F1E;
  --color-text-muted:      #828181;
  --color-text-soft:       #6B6766;
  --color-text-on-dark:    #F2EFEC;
  --color-text-dark-muted: #C8C3BF;

  --color-border:        #E9E5E2;
  --color-border-strong: #D4CEC9;

  /* === TYPOGRAPHY ======================================================= */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs:   0.75rem;     /* 12px */
  --fs-sm:   0.875rem;    /* 14px */
  --fs-base: 1rem;        /* 16px */
  --fs-md:   1.125rem;    /* 18px */
  --fs-lg:   1.25rem;     /* 20px */
  --fs-xl:   1.5rem;      /* 24px */
  --fs-2xl:  1.875rem;    /* 30px */
  --fs-3xl:  2.25rem;     /* 36px */
  --fs-4xl:  3rem;        /* 48px */
  --fs-5xl:  3.75rem;     /* 60px */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

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

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* === SPACING (4px scale) ============================================== */
  --space-1:  0.25rem;    /* 4 */
  --space-2:  0.5rem;     /* 8 */
  --space-3:  0.75rem;    /* 12 */
  --space-4:  1rem;       /* 16 */
  --space-5:  1.5rem;     /* 24 */
  --space-6:  2rem;       /* 32 */
  --space-7:  3rem;       /* 48 */
  --space-8:  4rem;       /* 64 */
  --space-9:  6rem;       /* 96 */
  --space-10: 8rem;       /* 128 */

  /* === RADIUS =========================================================== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-card: 18px;

  /* === SHADOWS ========================================================== */
  --shadow-xs:  0 1px 2px rgba(34, 31, 30, .04);
  --shadow-sm:  0 2px 6px rgba(34, 31, 30, .06);
  --shadow-md:  0 6px 16px rgba(34, 31, 30, .08);
  --shadow-lg:  0 12px 32px rgba(34, 31, 30, .10);
  --shadow-xl:  0 24px 48px rgba(34, 31, 30, .14);
  --shadow-cta: 0 8px 20px rgba(246, 98, 62, .28);
  --shadow-focus-ring: 0 0 0 3px rgba(246, 98, 62, .25);

  /* === Z-INDEX SCALE ==================================================== */
  --z-header:       1020;
  --z-bottom-nav:   1030;
  --z-overlay:      1040;
  --z-bottom-sheet: 1050;
  --z-popover:      2050;
  --z-toast:        2100;
  --z-modal:        3000;

  /* === MOTION =========================================================== */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(0, 0, .2, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --dur-fast:    .12s;
  --dur-base:    .2s;
  --dur-slow:    .35s;

  /* === LAYOUT =========================================================== */
  --container-max:    1280px;
  --container-tight:  960px;
  --header-h-desktop: 88px;
  --header-h-mobile:  64px;
  --bottom-nav-h:     68px;

  /* === GRADIENTS ======================================================== */
  --grad-cream: linear-gradient(135deg, #FFFAF6 0%, #FFF1EB 100%);
  --grad-peach: linear-gradient(135deg, #FFF1EB 0%, #FFD9C9 100%);
  --grad-cta:   linear-gradient(135deg, #F77554 0%, #F6623E 100%);
  --grad-rose:  linear-gradient(135deg, #FBF2F1 0%, #F4DDD9 100%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur-base: 0s;
    --dur-slow: 0s;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}