/* ==========================================================================
   GB FAM — design tokens (source of truth for colour, type, spacing)
   Palette comes from brand/source/GB FAM_logo guide.pdf (sampled values).
   Tints marked (derived) are NOT in the guide — they exist only for UI surfaces.
   ========================================================================== */
:root {
  /* Brand palette (from the identity guide) */
  --gb-teal:      #002B2F;   /* primary surface — "petrol" */
  --gb-black:     #000000;
  --gb-grey-100:  #E0E0E0;   /* light text on dark, light surfaces */
  --gb-grey-300:  #C6C6C6;   /* secondary text on dark, light card surface */
  --gb-grey-700:  #3A3A3A;   /* ghosted watermark on black */
  --gb-white:     #FFFFFF;

  /* Derived tints (UI only) */
  --gb-teal-800:  #0A3538;   /* panels / cards on teal */
  --gb-teal-900:  #001E21;   /* deepest teal, footer */
  --gb-hairline:  rgba(224, 224, 224, 0.14);
  --gb-hairline-dark: rgba(0, 0, 0, 0.16);
  --gb-text-muted: rgba(224, 224, 224, 0.68);

  /* Semantic roles — themes swap these, components use only these.
     Default theme since D-022: black & white (Bang Bang direction);
     the teal values above stay available via [data-gb-theme="teal"]. */
  --gb-bg:        var(--gb-black);
  --gb-bg-alt:    #111111;
  --gb-surface:   #111111;
  --gb-fg:        var(--gb-grey-100);
  --gb-fg-muted:  var(--gb-grey-300);
  --gb-line:      var(--gb-grey-700);
  --gb-cta-bg:    var(--gb-white);
  --gb-cta-fg:    var(--gb-black);
  --gb-cta-bg-hover: var(--gb-grey-100);
  --gb-focus:     var(--gb-white);

  /* Typography */
  --gb-font-display: "Unbounded", "Manrope", system-ui, sans-serif;   /* headings, CTAs (BG/EN/RU) */
  --gb-font-text:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gb-font-accent:  "Big John", "Unbounded", sans-serif;              /* Latin-only labels: #GBFAM, EST. 2024 */

  --gb-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --gb-step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem);
  --gb-step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --gb-step-2:  clamp(1.50rem, 1.25rem + 1.20vw, 2.25rem);
  --gb-step-3:  clamp(2.00rem, 1.40rem + 3.00vw, 3.75rem);
  --gb-step-4:  clamp(2.50rem, 1.50rem + 5.00vw, 5.50rem);
  --gb-tracking-caps: 0.12em;
  --gb-leading-tight: 1.05;
  --gb-leading-text: 1.6;

  /* Spacing & shape */
  --gb-space-1: 0.25rem; --gb-space-2: 0.5rem; --gb-space-3: 1rem; --gb-space-4: 1.5rem;
  --gb-space-5: 2.5rem; --gb-space-6: 4rem;  --gb-space-7: 6rem;  --gb-space-8: 9rem;
  --gb-radius: 2px;              /* the brand is sharp-edged; keep radii near zero */
  --gb-container: 72rem;
  --gb-gutter: clamp(1rem, 4vw, 2.5rem);

  /* Motion */
  --gb-ease: cubic-bezier(.2,.7,.2,1);
  --gb-dur: 240ms;
}

/* Teal theme — the identity guide's signature surface, kept for any future section */
[data-gb-theme="teal"] {
  --gb-bg: var(--gb-teal);
  --gb-bg-alt: var(--gb-black);
  --gb-surface: var(--gb-teal-800);
  --gb-fg-muted: var(--gb-text-muted);
  --gb-line: var(--gb-hairline);
  --gb-cta-bg: var(--gb-grey-100);
  --gb-cta-fg: var(--gb-teal);
}

/* Light section theme (grey paper, teal ink) — use sparingly, e.g. the process or FAQ block */
[data-gb-theme="light"] {
  --gb-bg: var(--gb-grey-100);
  --gb-bg-alt: var(--gb-grey-300);
  --gb-surface: var(--gb-white);
  --gb-fg: var(--gb-teal);
  --gb-fg-muted: rgba(0, 43, 47, 0.68);
  --gb-line: var(--gb-hairline-dark);
  --gb-cta-bg: var(--gb-teal);
  --gb-cta-fg: var(--gb-grey-100);
  --gb-cta-bg-hover: var(--gb-black);
  --gb-focus: var(--gb-teal);
}

/* Black section theme — hero alternative / footer */
[data-gb-theme="black"] {
  --gb-bg: var(--gb-black);
  --gb-bg-alt: var(--gb-teal-900);
  --gb-surface: #111111;
  --gb-fg: var(--gb-grey-100);
  --gb-line: rgba(224,224,224,0.12);
  --gb-cta-bg: var(--gb-grey-100);
  --gb-cta-fg: var(--gb-black);
}

/* Bootstrap 5.3 bridge — map Bootstrap's variables onto the brand so default components inherit it.
   Load AFTER bootstrap.min.css. Set <html data-bs-theme="dark"> for correct form/control defaults. */
:root, [data-bs-theme="dark"] {
  --bs-body-bg: var(--gb-bg);
  --bs-body-color: var(--gb-fg);
  --bs-body-font-family: var(--gb-font-text);
  --bs-body-font-size: var(--gb-step-0);
  --bs-body-line-height: var(--gb-leading-text);
  --bs-heading-color: var(--gb-fg);
  --bs-link-color: var(--gb-fg);
  --bs-link-hover-color: var(--gb-white);
  --bs-border-color: var(--gb-line);
  --bs-border-radius: var(--gb-radius);
  --bs-border-radius-sm: var(--gb-radius);
  --bs-border-radius-lg: var(--gb-radius);
  --bs-primary: var(--gb-grey-100);
  --bs-primary-rgb: 224, 224, 224;
  --bs-secondary: var(--gb-grey-300);
  --bs-dark: var(--gb-black);
  --bs-light: var(--gb-grey-100);
  --bs-focus-ring-color: rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root { --gb-dur: 0ms; }
}