/* ═══════════════════════════════════════════════════════════════════
   Aerial Grid AG — Colors & Type
   Single source of truth for color tokens, typography tokens,
   and semantic styles. Import in any HTML surface.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Fonts — ALL self-hosted (offline-ready, no CDN needed) ──────────
   Drop-in: this stylesheet + the /fonts folder = complete typography.
   Paths are relative to the project root. From a subfolder (e.g.
   ui_kits/x/), link with ../../colors_and_type.css so 'fonts/…' resolves.
   ──────────────────────────────────────────────────────────────────── */

/* Montserrat — the brand display + body face (self-hosted latin, woff2).
   Gotham was retired system-wide (21.06.2026) due to licensing friction;
   Montserrat is now canonical, NOT a fallback. The legacy Gotham files
   have been removed from the package entirely. */
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Regular.woff2') format('woff2');  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Medium.woff2') format('woff2');   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Bold.woff2') format('woff2');     font-weight: 700; font-style: normal; font-display: swap; }

/* DM Mono — labels, telemetry, eyebrows (self-hosted latin) */
@font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Medium.woff2') format('woff2');  font-weight: 500; font-style: normal; font-display: swap; }

/* Newsreader — editorial italic accent (self-hosted latin, roman + italic) */
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-Regular.woff2') format('woff2');       font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-Medium.woff2') format('woff2');        font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-SemiBold.woff2') format('woff2');      font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic;  font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-MediumItalic.woff2') format('woff2');  font-weight: 500; font-style: italic;  font-display: swap; }

/* No CDN required. The Google Fonts <link> in existing HTML files is now
   redundant (harmless progressive enhancement) and can be removed for a
   fully air-gapped package. */

:root {
  /* ─── COLOR — Sky family (high altitude, vision) ─── */
  --sky-deep:      #0B1D3A;   /* default dark bg, hero, deck dividers */
  --sky-mid:       #1B3A5C;   /* secondary headers, surfaces on dark */
  --sky-bright:    #3B82C4;   /* PRIMARY ACCENT — links, focus, data */
  --sky-pale:      #D6E8F7;   /* info bg, hover surface tint */
  --sky-wash:      #EBF3FB;   /* subtle bg sections */

  /* ─── COLOR — Glimmer (CTA only, "the human moment") ─── */
  --glimmer:       #E8943A;   /* CTAs, primary buttons, highlights */
  --glimmer-hot:   #F5A623;   /* CTA hover */
  --glimmer-soft:  #F5D4A8;   /* glimmer surface tint */
  --glimmer-glow:  rgba(232,148,58,0.15);

  /* ─── COLOR — Ground (warm, human, trust) ─── */
  --ground-cream:  #FAF8F4;   /* DEFAULT light bg (NOT pure white) */
  --ground-sand:   #F5F0E8;   /* alt surface, document body */
  --ground-warm:   #E8DDD0;   /* tactile / textured surface accent */

  /* ─── COLOR — Instrument (data UI surfaces, deeper than Sky Deep) ─── */
  --instrument-bg:      #0F1923;
  --instrument-surface: #162230;
  --instrument-line:    rgba(59,130,196,0.20);
  --instrument-text:    #8BA4BD;

  /* ─── COLOR — Ink (text) ─── */
  --ink:        #1A1E24;   /* primary text on light */
  --ink-mid:    #4A5568;   /* secondary text */
  --ink-light:  #7A8899;   /* tertiary / muted text */

  /* ─── COLOR — Surfaces ─── */
  --surface:      #FFFFFF;  /* card surface, only inside containers */
  --surface-dim:  #F7F9FB;

  /* ─── COLOR — Semantic ─── */
  --success: #27AE60;
  --warning: #E8943A;        /* = Glimmer */
  --error:   #C0392B;
  --info:    #3B82C4;        /* = Sky Bright */

  /* ─── COLOR — Legacy (transition tokens, do NOT use on new digital) ─── */
  --legacy-blue:  #0B60B0;
  --legacy-cyan:  #3ABEF9;

  /* ─── TYPE — Families ─── */
  --font-display:   'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
  --font-body:      'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono:      'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-editorial: 'Newsreader', 'Iowan Old Style', Georgia, serif;

  /* ─── TYPE — Scale ─── */
  --fs-display: 3.5rem;     /* 56px hero only */
  --fs-h1:      2.5rem;     /* 40px page/slide titles */
  --fs-h2:      2rem;       /* 32px section headlines */
  --fs-h3:      1.25rem;    /* 20px subsections, card titles */
  --fs-body-l:  1.125rem;   /* 18px lead paragraphs */
  --fs-body:    0.9375rem;  /* 15px default body */
  --fs-small:   0.8125rem;  /* 13px captions */
  --fs-label:   0.6875rem;  /* 11px DM Mono caps eyebrow */
  --fs-micro:   0.625rem;   /* 10px legal */

  /* ─── TYPE — Letter spacing ─── */
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-body:    0;
  --tracking-mono:    0.15em;
  --tracking-mono-tight: 0.08em;

  /* ─── TYPE — Line height ─── */
  --lh-display: 1.2;   /* @kind font */
  --lh-heading: 1.4;   /* @kind font */
  --lh-body:    1.6;   /* @kind font */

  /* ─── SPACING — base 4px ─── */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* ─── RADII ─── */
  --radius-sm:   4px;    /* inputs, badges */
  --radius-md:   8px;    /* cards, buttons */
  --radius-lg:   12px;   /* large surfaces, image containers */
  --radius-full: 999px;  /* avatars, pills only */

  /* ─── ELEVATION / SHADOWS ─── */
  --shadow-sm:    0 1px 2px rgba(11,29,58,0.04);
  --shadow-card:  0 4px 16px rgba(11,29,58,0.06);
  --shadow-lift:  0 12px 40px rgba(11,29,58,0.08);
  --shadow-hero:  0 20px 48px rgba(11,29,58,0.10);
  --shadow-cta:   0 4px 24px rgba(232,148,58,0.30);
  --shadow-cta-hover: 0 8px 32px rgba(232,148,58,0.40);

  /* ─── MOTION — "everything moves like flight" ─── */
  --ease-flight:  cubic-bezier(0.25, 0.1, 0.25, 1);  /* @kind other */
  --ease-ascend:  cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */
  --dur-micro:    100ms;   /* @kind other */
  --dur-fast:     300ms;   /* @kind other */
  --dur-medium:   600ms;   /* @kind other */
  --dur-slow:     1200ms;  /* @kind other */

  /* ─── BREAKPOINTS (informational) ─── */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}

/* ═══════════════════════════════════════════════════════════════════
   Semantic styles — use these directly on elements
   ═══════════════════════════════════════════════════════════════════ */

body.ag-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--ground-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ag-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.ag-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
}

.ag-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
}

.ag-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.ag-body-l {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--ink-mid);
}

.ag-small {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-mid);
}

/* DM Mono caps eyebrow — the brand's signature label */
.ag-label,
.ag-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--sky-bright);
}

/* DM Mono caps eyebrow on dark surfaces */
.ag-eyebrow.on-dark { color: var(--glimmer); }

/* Tabular DM Mono for telemetry, IDs, coordinates */
.ag-mono-data {
  font-family: var(--font-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ink);
}

/* Newsreader Italic — editorial accent. Max once per surface. */
.ag-editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink-mid);
}

/* Pull quote — long-form */
.ag-pullquote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--ink-mid);
  border-top: 1px solid var(--sky-bright);
  border-bottom: 1px solid var(--sky-bright);
  padding: var(--space-lg) 0;
  margin: var(--space-xl) 0;
}

/* Links */
.ag-link {
  color: var(--sky-bright);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-flight);
}
.ag-link:hover { color: var(--sky-mid); }
.ag-link:focus-visible {
  outline: 2px solid var(--sky-bright);
  outline-offset: 2px;
  border-radius: 2px;
}