/* GT AFRIK — design tokens (single source of truth for palette, type, space, motion) */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: optional;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
}

:root {
  /* ── surfaces ──
     The console (Live Demo) sits a shade darker than the marketing pages;
     both dialects are tokenised rather than hardcoded per page. */
  --color-bg: #05070d;
  --color-bg-page: #06080f;
  --color-surface: #0a0f1e;
  --color-bg-panel: #070a12;
  --color-bg-sunken: #060910;
  --color-bg-map: #080d18;
  --color-bg-water: #0a1526;
  --color-bg-footer: #04060c;
  --color-phone-shell: #0b0e16;

  /* ── ink ── */
  --color-text: #ffffff;
  --color-text-muted: #8b97ab;
  --color-text-body: #94a3b8;
  --color-text-dim: rgba(255, 255, 255, 0.58);
  --color-text-faint: rgba(255, 255, 255, 0.3);

  /* ── semantic status ── */
  --color-accent: #3866ff;
  --color-accent-soft: #8aa2ff;
  --color-running: #32c96f;
  --color-idle: #f5b93c;
  --color-stopped: #ef4444;
  --color-unreachable: #8b97ab;
  --color-overspeed: #a855f7;

  /* ── light surfaces (phone mockups) ── */
  --color-app-chrome: #12406b;
  --color-app-bg: #eef1f6;
  --color-app-bg-alt: #f4f6f9;
  --color-app-card: #ffffff;
  --color-app-ink: #101828;
  --color-app-ink-soft: #344054;
  --color-app-line: #e3e8f0;
  --color-app-line-strong: #d7dee8;
  --color-app-road: #b9c6d8;

  /* ── hairlines ── */
  --line-faint: rgba(255, 255, 255, 0.04);
  --line-soft: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* ── type ──
     Two families, deliberately: one grotesk carries display *and* body so the
     page has a single voice, one mono carries every telemetry reading. */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Inter runs wide at text sizes; a hair of negative tracking sets it. */
  --track-body: -0.011em;

  --text-hero: clamp(44px, 8.5vw, 128px);
  --text-h2: clamp(36px, 5vw, 76px);
  --text-h2-cta: clamp(34px, 5.4vw, 80px);
  --text-lead: clamp(15px, 1.25vw, 18px);
  --text-lead-sm: clamp(14.5px, 1.15vw, 17px);
  --text-kpi: clamp(34px, 3.6vw, 56px);
  --text-eyebrow: 11px;
  --text-meta: 10px;

  /* ── space ── */
  --gutter: clamp(24px, 4.5vw, 72px);
  --gutter-wide: clamp(12px, 3vw, 72px);
  --panel-pad: clamp(14px, 2vw, 26px);
  --shell-max: 1560px;
  --chrome-max: 1320px;

  /* ── radii ── */
  --radius-panel: 18px;
  --radius-card: 14px;
  --radius-pill: 999px;
  --radius-phone: 52px;
  --radius-screen: 42px;

  /* ── motion ── */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-normal: 350ms;
  --duration-slow: 850ms;
  --duration-tick: 1000ms;

  /* ── elevation ── */
  --shadow-panel: 0 40px 120px rgba(0, 0, 0, 0.55);
  --shadow-phone: 0 50px 120px rgba(0, 0, 0, 0.6);
  --shadow-app-card: 0 2px 10px rgba(15, 40, 80, 0.06);

  /* ── material ──
     The dark surfaces are lit from above: every raised plane gets a faint
     top-edge highlight and a vertical wash, so panels read as physical
     rather than as flat fills. Composed from three layers:
       1. --edge-top    hairline catching the light
       2. --surface-lit gradient wash down the face
       3. --shadow-*    contact shadow grounding it to the page */
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --edge-top-strong: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --surface-lit: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(255, 255, 255, 0) 42%
  );

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45),
    0 24px 56px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(56, 102, 255, 0.16);
  /* Tight at rest so the accent reads as a solid object, blooming only on
     hover — a permanent halo makes every button look like it is in a state. */
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(56, 102, 255, 0.2);
  --shadow-btn-hover: 0 2px 4px rgba(0, 0, 0, 0.4),
    0 18px 44px rgba(56, 102, 255, 0.5);

  /* Accent as a lit surface, not a flat swatch. */
  --grad-accent: linear-gradient(180deg, #4d78ff 0%, #3866ff 52%, #2e57e6 100%);
  --grad-accent-hover: linear-gradient(
    180deg,
    #5b83ff 0%,
    #416eff 52%,
    #3660ef 100%
  );

  /* Cursor-tracked bloom on interactive surfaces; premium.js feeds --mx/--my. */
  --bloom-accent: rgba(56, 102, 255, 0.14);
  --bloom-green: rgba(50, 201, 111, 0.13);

  /* Film grain strength — high enough to kill gradient banding, low enough
     that it never reads as texture on its own. */
  --grain-opacity: 0.032;

  /* Narrow viewports give the copy the full column width, so there is no
     gutter left for the floating telemetry words to live in. Below 900px they
     stop being a composition element and become flat texture at a fixed low
     alpha. Each hero opts in via its own media query — see --hero-gutter. */
  --hero-gutter-flat: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.12) 100%
  );

  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}