/* =========================================================
   PERVое — design tokens
   Single source of truth for the visual system.
   ========================================================= */

:root {
  /* Brand */
  --color-navy: #024268;
  --color-blue: #1765A4;
  --color-nav-active: #0B6FB8;
  --color-orange: #EB6F0A;
  --color-orange-soft: color-mix(in srgb, var(--color-orange) 12%, var(--color-bg));
  --color-terracotta: #A62F04;
  --color-deep-warm: #752204;

  /* Neutrals */
  --color-text: #35424E;
  --color-text-muted: #6B7280;
  --color-bg: #FFFFFF;
  --color-surface: #F7F7F5;
  --color-line: #DDE2E6;
  --color-divider: color-mix(in srgb, var(--color-navy) 22%, transparent);
  --color-placeholder: #8A949E;

  /* Dark surfaces */
  --color-dark-text: #F7F7F4;
  --color-dark-text-muted: #D5E0E6;
  --color-dark-surface: #0A2438;
  --color-dark-surface-raised: #12344D;
  --color-dark-field: #173B55;
  --color-dark-border: #2B4F6B;
  --color-dark-placeholder: #9CB0C1;
  --color-focus: #3B82F6;
  --color-error: #EF4444;
  --color-error-text: #FCA5A5;
  --color-blue-brand-surface: #2F5F8A;

  /* Collage-only accent */
  --color-collage-yellow: #FFD21A;

  /* Typography */
  --font-sans: "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

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

  /* Fluid type — responsive production scale.
   H1 36→56 / 1.14
   H2 24→32 / 1.20
   H3 19→22 / 1.40
   Lead 18→20 / 1.50
   Body 16→17 / 1.62
   Small 14→15 / 1.60 */
  --fs-h1: clamp(2.25rem, 1.89rem + 1.6vw, 3.5rem);       /* 36 → 56 */
  --fs-h2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);   /* 24 → 32 */
  --fs-h3: clamp(1.1875rem, 1.135rem + 0.23vw, 1.375rem); /* 19 → 22 */
  --fs-lead: clamp(1.125rem, 1.09rem + 0.15vw, 1.25rem);  /* 18 → 20 */
  --fs-body: clamp(1rem, 0.982rem + 0.08vw, 1.0625rem);   /* 16 → 17 */
  --fs-small: clamp(0.875rem, 0.857rem + 0.08vw, 0.9375rem); /* 14 → 15 */

  --lh-h1: 1.14;
  --lh-h2: 1.2;
  --lh-h3: 1.4;
  --lh-lead: 1.5;
  --lh-body: 1.62;
  --lh-small: 1.6;

  /* Spacing rhythm */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */

  /* Layout */
  --container-max: 75rem; /* 1200px */
  --page-gutter: 1.25rem; /* 20px @ mobile */

  /* UI */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.5rem;
  --control-height: 3.25rem;
  --transition-fast: 160ms ease;
}

@media (min-width: 52.125rem) { /* ~834px */
  :root {
    --page-gutter: 2rem;
  }
}