/* StellarGen Aerospace design tokens
   Source: work/design-final.md (Option 1, approved by Karan 14 October 2026).
   Every colour here appears in the contrast table in design-final.md. */

/* Fonts: self-hosted, SIL Open Font License 1.1. Files from npm @fontsource 5.x (latin subset, woff2). */
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* Colour: light surfaces */
  --color-ground: #ffffff;          /* page background */
  --color-surface: #f6f6f4;         /* alternate sections, cards */
  --color-surface-raised: #ecece8;  /* table header, hovered rows, image placeholders */
  --color-line: #e3e3de;            /* decorative hairlines only */
  --color-border-strong: #8c8c84;   /* input and secondary button borders */

  /* Colour: text */
  --color-ink: #111111;             /* headings and body */
  --color-ink-muted: #55554f;       /* secondary text, captions */

  /* Colour: brand and actions */
  --color-gold: #cf9c0d;            /* primary action fill; never text on light */
  --color-on-gold: #111111;         /* label on gold and gold-hover */
  --color-gold-hover: #e2b43a;      /* primary action hover */
  --color-gold-text: #7a5600;       /* links, eyebrow labels, focus ring on light */
  --color-gold-tint: #fbf3dc;       /* highlight panels, tags, selected options */

  /* Colour: dark bands (header, footer, one hero band per page) */
  --color-night: #0e0e0e;
  --color-on-night: #faf7f2;
  --color-on-night-muted: #b8b8b0;
  --color-night-border: #8a8a82;    /* outlined button on night */

  /* Colour: status (always with an icon and a word) */
  --color-success: #0f6f64;
  --color-success-tint: #e6f4f1;
  --color-warning: #a34700;
  --color-warning-tint: #fdf1e7;
  --color-danger: #b3261e;
  --color-danger-tint: #fbeceb;
  --color-info: #1f5c99;

  /* Focus */
  --focus-ring: 2px solid var(--color-gold-text);
  --focus-ring-on-night: 2px solid var(--color-gold);
  --focus-offset: 2px;

  /* Type families */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  /* Hindi pages (P-14, later): add "IBM Plex Sans Devanagari" to the sans and display font stacks */

  /* Type scale: size / line height / weight. Mobile values below 600px in the media query. */
  --text-display-size: 60px;  --text-display-lh: 1.05; --text-display-weight: 700; --text-display-tracking: -0.01em;
  --text-h1-size: 44px;       --text-h1-lh: 1.1;   --text-h1-weight: 700; --text-h1-tracking: -0.01em;
  --text-h2-size: 30px;       --text-h2-lh: 1.2;   --text-h2-weight: 600;
  --text-h3-size: 20px;       --text-h3-lh: 1.3;   --text-h3-weight: 600;
  --text-h4-size: 17px;       --text-h4-lh: 1.5;   --text-h4-weight: 600;
  --text-numeric-size: 44px;  --text-numeric-lh: 1; --text-numeric-weight: 700;
  --text-lead-size: 19px;     --text-lead-lh: 30px;  --text-lead-weight: 400;
  --text-body-size: 17px;     --text-body-lh: 28px;  --text-body-weight: 400;
  --text-small-size: 14px;    --text-small-lh: 22px; --text-small-weight: 400;
  --text-eyebrow-size: 14px;  --text-eyebrow-lh: 20px; --text-eyebrow-weight: 600;
  --text-label-size: 15px;    --text-label-lh: 22px; --text-label-weight: 600;
  --text-button-size: 16px;   --text-button-lh: 24px; --text-button-weight: 600;
  --text-spec-size: 14px;     --text-spec-lh: 22px;  --text-spec-weight: 500;
  --text-min-size: 13px;      /* nothing on the site is smaller */
  --measure: 68ch;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Layout */
  --container-max: 1200px;
  --gutter: 16px;            /* 48px from 900px */
  --section-gap: 64px;       /* 96px from 900px */
  --header-height: 72px;

  /* Shape */
  --radius-none: 0;
  --radius-sm: 4px;          /* buttons, inputs */
  --radius-md: 8px;          /* cards, panels; largest corner */
  --radius-pill: 999px;      /* tags only */

  /* Motion (all switched off under prefers-reduced-motion) */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 450ms;
  --motion-hero-total: 1800ms; /* H-1 drone drawing, upper limit 2000ms */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 900px) {
  :root { --gutter: 48px; --section-gap: 96px; }
}

@media (max-width: 599px) {
  :root {
    --text-display-size: 36px; --text-display-lh: 1.1;
    --text-h1-size: 32px;      --text-h1-lh: 1.15;
    --text-h2-size: 26px;      --text-h2-lh: 1.25;
    --text-h3-size: 19px;
    --text-numeric-size: 36px;
    --text-lead-size: 18px;    --text-lead-lh: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --motion-hero-total: 0ms; }
}