/* ============================================================
   BPI design tokens — v2 (bconsult-inspired editorial direction)
   Source of truth for every visual decision. See docs/DESIGN_SYSTEM.md and
   docs/BCONSULT_REFERENCE_ANALYSIS.md.
   Breakpoints (used in media queries, cannot be custom properties):
     1440px large desktop · 1200px desktop · 1024px tablet-landscape
     768px tablet · 430px mobile · 360px small mobile
   ============================================================ */

:root {
  /* ---- Brand greens (from the BPI logo) ---- */
  --green-950: #0E1F1A;   /* footer near-black green */
  --green-900: #122A23;
  --green-800: #163B33;   /* hero / dark bands */
  --green-700: #1E4F44;
  --green-600: #275D50;   /* logo green — light-surface accent */
  --green-300: #7FA89B;
  --green-200: #A9C6BB;   /* accent on dark (circles, hovers) */
  --green-100: #DCE8E2;
  --green-050: #EFF4F1;

  /* ---- Neutrals ---- */
  --ink-900: #191B1A;
  --ink-700: #33362F;
  --ink-500: #5A5D55;
  --ink-300: #9B9E94;
  --line-300: #D9D6CE;
  --line-200: #E7E4DD;
  --paper-000: #FFFFFF;
  --paper-050: #FBFAF7;
  --paper-100: #F4F1EA;

  /* on-dark tints */
  --ondark-100: rgb(255 255 255 / 0.92);
  --ondark-70: rgb(255 255 255 / 0.7);
  --ondark-40: rgb(255 255 255 / 0.4);
  --ondark-line: rgb(255 255 255 / 0.14);

  /* ---- Semantic ---- */
  --color-bg: var(--paper-050);
  --color-surface: var(--paper-000);
  --color-text: var(--ink-900);
  --color-text-secondary: var(--ink-500);
  --color-accent: var(--green-600);
  --color-accent-strong: var(--green-700);
  --color-error: #B3231E;
  --color-success: #1E6B3C;
  --color-focus-ring: var(--green-600);

  /* ---- Typography ----
     Inter (SIL OFL, Google Fonts: latin + latin-ext + cyrillic) — full
     Azerbaijani (Ə ə Ğ ğ İ ı Ö ö Ş ş Ü ü Ç ç) and Cyrillic coverage.
     System grotesque fallbacks keep identical coverage. */
  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Fluid editorial scale — big and tight (reference: 65px H1 / lh 0.9) */
  --text-display: clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem);
  --text-h1: clamp(2.1rem, 1.2rem + 2.8vw, 3.5rem);
  --text-h2: clamp(1.75rem, 1.25rem + 1.7vw, 2.75rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.9rem;
  --text-caption: 0.78rem;

  --leading-display: 1.0;
  --leading-heading: 1.08;
  --leading-body: 1.65;
  --tracking-display: -0.03em;
  --tracking-caps: 0.12em;
  --measure: 64ch;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-section: clamp(4.5rem, 5vw + 2rem, 8.5rem);

  /* ---- Containers (reference is very wide) ---- */
  --container-max: 1280px;
  --container-wide: 1520px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Structure: thin lines, square corners ---- */
  --border-hairline: 1px solid var(--line-200);
  --border-strong: 1px solid var(--line-300);
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-full: 999px;   /* circles only */
  --shadow-soft: 0 1px 2px rgb(20 22 20 / 0.05), 0 8px 24px rgb(20 22 20 / 0.06);
  --shadow-raised: 0 2px 6px rgb(20 22 20 / 0.08), 0 16px 40px rgb(20 22 20 / 0.10);

  /* ---- Controls ---- */
  --control-height: 52px;
  --control-circle: 48px;
  --control-pad-x: 1.75rem;

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 700ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Z-index layers ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-mobile-menu: 300;
  --z-skiplink: 400;
  --z-loader: 900;
}