/*
 * ALUPROM / mskvorota.ru
 * Digital design tokens v1.0
 * Source of truth: docs/BRAND_STANDARDS.md
 */

:root {
  /* Brand colors */
  --color-primary: #003087;
  --color-primary-hover: #00256a;
  --color-primary-active: #001d54;
  --color-primary-soft: #e8f0fa;
  --color-on-primary: #ffffff;

  --color-ink: #101820;
  --color-graphite: #26323b;
  --color-steel: #66737d;
  --color-border: #d8e0e6;
  --color-surface: #f6f8fa;
  --color-surface-raised: #ffffff;
  --color-white: #ffffff;

  --color-signal: #c94f12;
  --color-success: #18794e;
  --color-error: #b42318;

  /* Semantic colors */
  --color-background: var(--color-surface);
  --color-foreground: var(--color-ink);
  --color-text-primary: var(--color-ink);
  --color-text-secondary: var(--color-steel);
  --color-link: var(--color-primary);
  --color-focus: #2f6fdb;
  --color-selection: #c9dbf2;

  /* Typography */
  --font-heading: "Manrope", "Arial", sans-serif;
  --font-body: "Inter", "Arial", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-display-xl: clamp(3rem, 6vw, 5.5rem);
  --text-display-lg: clamp(2.5rem, 5vw, 4.25rem);
  --text-h1: clamp(2.375rem, 4vw, 3.75rem);
  --text-h2: clamp(1.875rem, 3vw, 2.75rem);
  --text-h3: clamp(1.375rem, 2vw, 1.875rem);
  --text-lead: clamp(1.125rem, 1.5vw, 1.375rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;

  --leading-display-xl: 0.96;
  --leading-display-lg: 1;
  --leading-h1: 1.04;
  --leading-h2: 1.1;
  --leading-h3: 1.2;
  --leading-lead: 1.5;
  --leading-body: 1.6;
  --leading-small: 1.5;
  --leading-label: 1.3;

  --tracking-display: -0.035em;
  --tracking-heading: -0.025em;
  --tracking-label: 0.08em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-main: 80rem;
  --container-wide: 90rem;
  --container-reading: 72ch;
  --grid-columns: 12;
  --grid-gap: 1.5rem;
  --page-gutter: clamp(1.25rem, 4vw, 4rem);
  --section-space: clamp(4rem, 8vw, 8rem);

  /* Shape */
  --radius-control: 0.25rem;
  --radius-card: 0.5rem;
  --radius-media: 0.75rem;
  --radius-pill: 999px;

  /* Borders and shadows */
  --border-default: 1px solid var(--color-border);
  --border-accent: 1px solid var(--color-primary);
  --shadow-card: 0 0.5rem 1.5rem rgb(16 24 32 / 8%);
  --shadow-raised: 0 1rem 3rem rgb(16 24 32 / 14%);

  /* Motion */
  --duration-micro: 160ms;
  --duration-base: 240ms;
  --duration-section: 400ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layering */
  --z-base: 0;
  --z-raised: 10;
  --z-header: 40;
  --z-overlay: 80;
  --z-modal: 100;

  /* Controls */
  --control-height: 3rem;
  --control-height-mobile: 3.25rem;
  --touch-target-min: 2.75rem;
  --focus-ring: 0 0 0 3px rgb(47 111 219 / 35%);
}

::selection {
  color: var(--color-ink);
  background: var(--color-selection);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

@media (max-width: 63.9375rem) {
  :root {
    --grid-columns: 8;
    --grid-gap: 1.25rem;
  }
}

@media (max-width: 47.9375rem) {
  :root {
    --grid-columns: 4;
    --grid-gap: 1rem;
    --section-space: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 1ms;
    --duration-base: 1ms;
    --duration-section: 1ms;
  }
}