/* ═══════════════════════════════════════════════════════════
   СБОР 73 Design Tokens 2026
   5 brand colors · 8-pt scale · Inter · glass
═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand (ONLY these 5 + alpha) ── */
  --color-brand-black: #141414;
  --color-brand-white: #FFFFFF;
  --color-brand-light: #F5F5F5;
  --color-brand-green: #2CC919;
  --color-brand-red: #E31E23;

  --color-black: var(--color-brand-black);
  --color-white: var(--color-brand-white);
  --color-light: var(--color-brand-light);
  --color-primary: var(--color-brand-green);
  --color-accent: var(--color-brand-red);

  --color-primary-dark: color-mix(in srgb, var(--color-brand-green) 82%, var(--color-brand-black));
  --color-primary-darker: color-mix(in srgb, var(--color-brand-green) 65%, var(--color-brand-black));
  --color-primary-soft: color-mix(in srgb, var(--color-brand-green) 12%, var(--color-brand-white));
  --color-primary-muted: color-mix(in srgb, var(--color-brand-green) 22%, var(--color-brand-light));
  --color-primary-text: color-mix(in srgb, var(--color-brand-green) 55%, var(--color-brand-black));

  --color-accent-dark: color-mix(in srgb, var(--color-brand-red) 82%, var(--color-brand-black));
  --color-accent-soft: color-mix(in srgb, var(--color-brand-red) 10%, var(--color-brand-white));
  --color-accent-text: color-mix(in srgb, var(--color-brand-red) 70%, var(--color-brand-black));

  --color-green: var(--color-brand-green);
  --color-red: var(--color-brand-red);
  --brand-green: var(--color-brand-green);
  --brand-red: var(--color-brand-red);

  /* Neutrals from black + light only */
  --color-slate-900: var(--color-brand-black);
  --color-slate-800: color-mix(in srgb, var(--color-brand-black) 92%, var(--color-brand-white));
  --color-slate-700: color-mix(in srgb, var(--color-brand-black) 82%, var(--color-brand-white));
  --color-slate-600: color-mix(in srgb, var(--color-brand-black) 70%, transparent);
  --color-slate-500: color-mix(in srgb, var(--color-brand-black) 55%, transparent);
  --color-slate-400: color-mix(in srgb, var(--color-brand-black) 40%, transparent);
  --color-slate-300: color-mix(in srgb, var(--color-brand-black) 18%, var(--color-brand-light));
  --color-slate-200: color-mix(in srgb, var(--color-brand-black) 10%, var(--color-brand-light));
  --color-slate-100: color-mix(in srgb, var(--color-brand-black) 5%, var(--color-brand-light));
  --color-slate-50: var(--color-brand-light);

  --text-primary: var(--color-brand-black);
  --text-secondary: color-mix(in srgb, var(--color-brand-black) 70%, transparent);
  --text-muted: color-mix(in srgb, var(--color-brand-black) 55%, transparent);
  --text-on-green: var(--color-brand-white);
  --text-on-dark: var(--color-brand-white);

  --border-subtle: color-mix(in srgb, var(--color-brand-black) 8%, transparent);
  --border-soft: color-mix(in srgb, var(--color-brand-black) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--color-brand-black) 18%, transparent);

  /* Category accents → brand green/black only */
  --cat-mak: var(--color-brand-green);
  --cat-plen: color-mix(in srgb, var(--color-brand-green) 72%, var(--color-brand-black));
  --cat-plast: color-mix(in srgb, var(--color-brand-black) 88%, var(--color-brand-green));

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-ui: var(--font-sans);
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;

  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.875rem;     /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md: 1.0625rem;    /* 17 */
  --text-lg: 1.125rem;     /* 18 */
  --text-xl: 1.25rem;      /* 20 */
  --text-2xl: 1.5rem;      /* 24 */

  --heading-size: clamp(1.5rem, 2.4vw, 2.125rem);
  --heading-weight: 600;
  --heading-line: 1.25;
  --body-line: 1.55;
  --lh-tight: 1.25;
  --lh-body: 1.55;

  /* ── 8-pt / 4-pt spacing scale ── */
  --s-0: 0;
  --s-1: 0.25rem;   /* 4 */
  --s-2: 0.5rem;    /* 8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.25rem;   /* 20 */
  --s-6: 1.5rem;    /* 24 */
  --s-8: 2rem;      /* 32 */
  --s-10: 2.5rem;   /* 40 */
  --s-12: 3rem;     /* 48 */
  --s-16: 4rem;     /* 64 */
  --s-20: 5rem;     /* 80 */
  --s-24: 6rem;     /* 96 */

  --space-xs: var(--s-1);
  --space-sm: var(--s-2);
  --space-md: var(--s-4);
  --space-lg: var(--s-6);
  --space-xl: var(--s-10);

  --section-pad-y: var(--s-16);
  --section-pad-x: var(--s-6);
  --section-pad-x-mobile: var(--s-5);
  --card-pad: var(--s-5);
  --gap-blocks: var(--s-6);
  --gap-btns: var(--s-4);
  --title-mb: var(--s-2);
  --subtitle-mb: var(--s-6);
  --cat-title-mb: var(--s-3);
  --list-item-py: var(--s-2);
  --btn-pad-y: var(--s-3);
  --btn-pad-x: var(--s-6);
  --btn-h: 3rem;          /* 48 */
  --btn-h-sm: 2.75rem;    /* 44 */
  --btn-font-size: 0.9375rem;
  --btn-font-weight: 600;
  --btn-radius: 12px;
  --cta-bar-mt: var(--s-8);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-badge: 9999px;
  --radius-icon: 50%;
  --radius-full: 9999px;

  /* Shadows (black alpha only) */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-brand-black) 5%, transparent);
  --shadow-md: 0 4px 16px color-mix(in srgb, var(--color-brand-black) 7%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, var(--color-brand-black) 10%, transparent);
  --shadow-soft: 0 8px 32px color-mix(in srgb, var(--color-brand-black) 6%, transparent);
  --shadow-card: 0 8px 28px color-mix(in srgb, var(--color-brand-black) 7%, transparent);
  --shadow-card-hover: 0 14px 36px color-mix(in srgb, var(--color-brand-black) 12%, transparent);
  --shadow-btn: 0 8px 22px color-mix(in srgb, var(--color-brand-green) 30%, transparent);
  --shadow-btn-hover: 0 12px 28px color-mix(in srgb, var(--color-brand-green) 38%, transparent);

  /* Glass 2026 */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-soft: rgba(255, 255, 255, 0.48);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-border-dark: color-mix(in srgb, var(--color-brand-black) 8%, transparent);
  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-sm: blur(12px) saturate(160%);
  --glass-shadow: 0 8px 32px color-mix(in srgb, var(--color-brand-black) 6%, transparent);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur: 280ms;
  --transition-fast: 0.2s var(--ease-out);
  --transition-base: 0.28s var(--ease-out);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand-green) 35%, transparent);

  /* Layout */
  --container-max: 100%;
  --site-gutter: var(--s-6);
  --header-height: 5rem; /* 80 */
  /* Стабильная высота экрана: 100dvh на мобиле «дышит» при скролле (URL-бар) */
  --layout-vh: 100svh;
  --bottom-bar-height: calc(6.75rem + env(safe-area-inset-bottom, 0px));
  --touch-min: 2.75rem; /* 44 */

  --rhythm-6: var(--s-6);
  --rhythm-8: var(--s-8);
  --rhythm-10: var(--s-10);
  --rhythm-12: var(--s-12);
  --mobile-gutter: var(--site-gutter);

  --page-bg: var(--color-brand-light);
  --surface: var(--color-brand-white);

  /* Frame (safe-area aware) */
  --frame-pad-left: max(var(--site-gutter), env(safe-area-inset-left, 0px));
  --frame-pad-right: max(var(--site-gutter), env(safe-area-inset-right, 0px));
  --content-pad-x: var(--site-gutter);

  --stage-radius: var(--radius-card);
  --stage-inset: var(--s-5);
  --stage-panel-bg: var(--glass-bg);
  --stage-panel-border: 1px solid var(--glass-border-dark);
  --stage-panel-shadow: var(--glass-shadow);
  --stage-blur: var(--glass-blur);

  /* Premium / p26 aliases */
  --p26-ease: var(--ease-out);
  --p26-ease-out: var(--ease-out);
  --p26-dur: var(--dur);
  --p26-dur-fast: var(--dur-fast);
  --p26-emerald-600: var(--color-brand-green);
  --p26-teal-600: var(--color-brand-green);
  --p26-emerald-500: var(--color-brand-green);
  --p26-green: var(--color-brand-green);
  --p26-cat-mak: var(--cat-mak);
  --p26-cat-plen: var(--cat-plen);
  --p26-cat-plast: var(--cat-plast);
}

@media (max-width: 767px) {
  :root {
    --site-gutter: var(--s-5);
    --section-pad-y: var(--s-12);
    --section-pad-x: var(--s-5);
    --card-pad: var(--s-5);
    --gap-blocks: var(--s-5);
    --subtitle-mb: var(--s-6);
    --cta-bar-mt: var(--s-6);
    --btn-pad-x: var(--s-5);
    --header-height: 4rem;
    /* JS перезапишет px; 100svh не меняется при скрытии URL-бара */
    --layout-vh: 100svh;
  }
}

@media (min-width: 768px) {
  :root {
    --site-gutter: var(--s-6);
    --section-pad-y: var(--s-16);
    --layout-vh: 100dvh;
  }
}

@media (min-width: 1280px) {
  :root {
    --section-pad-y: var(--s-20);
    --site-gutter: var(--s-8);
  }
}