/* =============================================================
   TerraGenie Design System — Core Tokens
   "Apple meets Caterpillar" — Blue-Collar Tech
   ============================================================= */

/* ----- Web fonts (Google Fonts fallbacks for the brand) -------
   Display:  Barlow            (industrial humanist sans, strong weights)
   Text:     IBM Plex Sans     (clean technical, excellent at small sizes)
   Mono:     JetBrains Mono    (for data, specs, coordinates)
   The TerraGenie wordmark itself is set in what looks like a
   proprietary geometric humanist — closest free match: Barlow.
   FLAG: confirm or provide a licensed face if one exists. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================
     COLOR — Primitives
     The brand runs on three forces: Red (action, urgency, brand),
     Charcoal (authority, structure), White (space, clarity).
     Everything else is a neutral scale for UI chrome.
     ========================================================= */

  /* Brand */
  --tg-red:           #D60C18;   /* primary brand — use sparingly, high-impact */
  --tg-red-hover:     #B80A14;   /* hover / pressed */
  --tg-red-deep:      #8A0810;   /* pressed / dark-mode surfaces */
  --tg-red-tint:      #FDECEC;   /* soft red wash for backgrounds */

  --tg-charcoal:      #585A5B;   /* secondary — wordmark grey */
  --tg-charcoal-ink:  #2F3132;   /* near-black for body text */
  --tg-black:         #0A0A0B;   /* true black for hero backgrounds */
  --tg-ink:           #0A0A0B;   /* alias — shared with support styles */

  --tg-white:         #FFFFFF;
  --tg-bone:          #F7F5F0;   /* warm off-white — topo-map paper */
  --tg-bone-2:        #EFEBE3;   /* deeper bone */

  /* Neutrals (cool charcoal-aligned scale) */
  --tg-n-50:  #F5F6F7;
  --tg-n-100: #E8EAEB;
  --tg-n-200: #D2D5D7;
  --tg-n-300: #B3B7BA;
  --tg-n-400: #8B9093;
  --tg-n-500: #6C7073;   /* close to charcoal */
  --tg-n-600: #585A5B;
  --tg-n-700: #43454A;
  --tg-n-800: #2A2C30;
  --tg-n-900: #16171A;

  /* Hi-vis accents (field + signal — hi-vis vest yellow, surveyor orange)
     Use ONLY for status, data viz, or jobsite-photography overlays.
     NEVER on CTAs or primary brand surfaces. */
  --tg-hivis:         #F4C400;   /* vest yellow */
  --tg-safety-orange: #FF6A13;   /* surveyor / cone orange */

  /* Semantic status */
  --tg-success:       #1F8F4E;   /* RTK fix / grade-match green */
  --tg-warn:          #E08A00;   /* amber — hold, waiting on signal */
  --tg-danger:        var(--tg-red);
  --tg-info:          #2C6EAE;

  /* =========================================================
     SEMANTIC COLOR
     Use these in components — never the primitives directly.
     ========================================================= */

  /* Foregrounds */
  --fg-1:        var(--tg-charcoal-ink);   /* body, primary text */
  --fg-2:        var(--tg-charcoal);       /* secondary text, labels */
  --fg-3:        var(--tg-n-400);          /* tertiary, captions */
  --fg-inverse:  var(--tg-white);
  --fg-brand:    var(--tg-red);
  --fg-link:     var(--tg-red);

  /* Backgrounds */
  --bg-page:     var(--tg-white);
  --bg-raised:   var(--tg-white);
  --bg-subtle:   var(--tg-n-50);
  --bg-muted:    var(--tg-bone);
  --bg-inverse:  var(--tg-black);
  --bg-inverse-2:var(--tg-n-900);
  --bg-brand:    var(--tg-red);
  --bg-brand-soft: var(--tg-red-tint);

  /* Borders / dividers */
  --border-1:    var(--tg-n-100);   /* default */
  --border-2:    var(--tg-n-200);   /* stronger */
  --border-3:    var(--tg-n-300);   /* input, interactive */
  --border-brand:var(--tg-red);

  /* =========================================================
     TYPE — Families & scale
     ========================================================= */
  --font-display: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights (Barlow + Plex) */
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;
  --w-black:     800;

  /* Modular type scale — 1.200 ratio, anchored at 16px
     Display steps are larger (1.333) to carry the big-slide look. */
  --fs-xs:   12px;   /* tags, overline */
  --fs-sm:   14px;   /* captions, dense data */
  --fs-md:   16px;   /* body */
  --fs-lg:   18px;   /* lead paragraph */
  --fs-xl:   22px;   /* sub-heads */
  --fs-2xl:  28px;   /* h3 */
  --fs-3xl:  36px;   /* h2 */
  --fs-4xl:  48px;   /* h1 */
  --fs-5xl:  64px;   /* display */
  --fs-6xl:  88px;   /* hero display */
  --fs-7xl: 120px;   /* slide titles */

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.4;
  --lh-text:   1.55;
  --lh-loose:  1.7;

  /* Letter-spacing — the brand leans slightly tight on display,
     slightly open on small labels/overlines. */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.10em;   /* overlines, "CONSTRUCTION LAYOUT" */

  /* =========================================================
     SPACING — 4pt base scale
     ========================================================= */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* =========================================================
     RADIUS — the brand sits SQUARE-to-slightly-rounded.
     Hardware is rugged; UI is modern but not playful.
     ========================================================= */
  --r-none:  0;
  --r-sm:    4px;    /* chips, small controls */
  --r-md:    8px;    /* inputs, buttons */
  --r-lg:   12px;    /* cards */
  --r-xl:   16px;    /* hero cards, modals */
  --r-2xl:  24px;    /* feature cards */
  --r-pill: 999px;

  /* =========================================================
     SHADOW — crisp, low-ambient. No soft cloud-glows.
     ========================================================= */
  --shadow-1: 0 1px 2px rgba(22, 23, 26, 0.06), 0 1px 1px rgba(22, 23, 26, 0.04);
  --shadow-2: 0 2px 6px rgba(22, 23, 26, 0.08), 0 1px 2px rgba(22, 23, 26, 0.05);
  --shadow-3: 0 8px 20px rgba(22, 23, 26, 0.10), 0 2px 4px rgba(22, 23, 26, 0.06);
  --shadow-4: 0 16px 40px rgba(22, 23, 26, 0.14), 0 4px 8px rgba(22, 23, 26, 0.06);
  --shadow-brand: 0 8px 24px rgba(214, 12, 24, 0.28);
  --shadow-focus: 0 0 0 3px rgba(214, 12, 24, 0.30);

  /* =========================================================
     MOTION — short, confident, no bounces.
     ========================================================= */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-in:    cubic-bezier(.7,0,.84,0);
  --ease-std:   cubic-bezier(.4,0,.2,1);
  --t-fast:     120ms;
  --t-med:      200ms;
  --t-slow:     360ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container:  1240px;
  --gutter:     var(--sp-6);
}

/* =============================================================
   SEMANTIC TYPE CLASSES — use these in decks / marketing / UI.
   ============================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body,
.tg-body {
  font-family: var(--font-text);
  font-size: var(--fs-md);
  line-height: var(--lh-text);
  color: var(--fg-1);
  font-weight: var(--w-regular);
}

.tg-display-hero {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-7xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-1);
}

.tg-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.tg-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.tg-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.tg-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.tg-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.tg-lead {
  font-family: var(--font-text);
  font-size: var(--fs-lg);
  line-height: var(--lh-text);
  color: var(--fg-2);
  font-weight: var(--w-regular);
}

.tg-p {
  font-family: var(--font-text);
  font-size: var(--fs-md);
  line-height: var(--lh-text);
  color: var(--fg-1);
}

.tg-caption {
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.tg-small {
  font-family: var(--font-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Overline / eyebrow — the "CONSTRUCTION LAYOUT"-style label */
.tg-overline {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}

/* Mono — specs, coordinates, telemetry, RTK data */
.tg-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  font-feature-settings: "tnum" 1;
}

/* A "stat" treatment for big numbers — e.g. "±1 cm", "8 mins" */
.tg-stat {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-5xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-feature-settings: "tnum" 1;
}

/* =============================================================
   LIGHT & DARK SURFACES
   ============================================================= */

.tg-surface-dark {
  background: var(--tg-black);
  color: var(--fg-inverse);
  --fg-1: var(--tg-white);
  --fg-2: rgba(255,255,255,0.75);
  --fg-3: rgba(255,255,255,0.55);
  --border-1: rgba(255,255,255,0.10);
  --border-2: rgba(255,255,255,0.18);
}

.tg-surface-bone {
  background: var(--tg-bone);
  color: var(--fg-1);
}