/* ============================================================
   Neptura Science — Canonical Design Tokens
   "The Climate Certainty Engine"
   Aesthetic: Satellite Precision (dark mode, neon data)
   ============================================================ */

/* --- Webfonts --------------------------------------------------- */
/* Inter is the primary typeface. JetBrains Mono is reserved for
   numerics, coordinates, hashes and technical IDs only.
   Both are Google Fonts — matches the spec exactly. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ============================================================
     1. COLOR — Brand
     ============================================================ */
  --neptura-blue:        #3B82F6;  /* Primary, data, links */
  --signal-green:        #10B981;  /* Success, live data, CTAs */
  --alert-orange:        #F59E0B;  /* Warnings, risk zones */

  /* Extended hues used in dataviz + legends (Deep Data Nature) */
  --neptura-deep-blue:   #0A1E26;  /* Monitoring/satellite surfaces */
  --risk-red:            #EF4444;  /* Deforestation, fail states */

  /* ============================================================
     2. COLOR — Surfaces (dark mode primary)
     Never pure black. Never pure white in light mode either.
     ============================================================ */
  --surface-900:         #0B0E14;  /* Dominant background */
  --surface-800:         #11151D;  /* Panels */
  --surface-700:         #181D28;  /* Elevated cards */
  --surface-600:         #1E2330;  /* Hover / secondary */
  --surface-500:         #252B3A;  /* Dividers on dark */

  /* Glassmorphism */
  --glass-bg:            rgba(30, 35, 48, 0.8);
  --glass-border:        rgba(255, 255, 255, 0.06);
  --glass-blur:          blur(12px);

  /* Hairlines */
  --hairline:            rgba(255, 255, 255, 0.08);
  --hairline-strong:     rgba(255, 255, 255, 0.16);

  /* ============================================================
     3. COLOR — Foreground (on dark)
     ============================================================ */
  --fg-1:                #FFFFFF;          /* Primary text, large numbers */
  --fg-2:                #D6DBE4;          /* Secondary text */
  --fg-3:                #9CA3AF;          /* Tertiary (gray-400), labels */
  --fg-4:                #6B7280;          /* Disabled / captions */
  --fg-invert:           #0B0E14;          /* Text on bright surfaces */

  /* Semantic */
  --fg-success:          var(--signal-green);
  --fg-warning:          var(--alert-orange);
  --fg-danger:           var(--risk-red);
  --fg-link:             var(--neptura-blue);

  /* ============================================================
     4. COLOR — Data viz series (ordered)
     ============================================================ */
  --data-1:              #3B82F6;  /* Blue   — primary */
  --data-2:              #10B981;  /* Green  — positive */
  --data-3:              #F59E0B;  /* Orange — attention */
  --data-4:              #8B5CF6;  /* Violet — secondary */
  --data-5:              #06B6D4;  /* Cyan   — tertiary */
  --data-6:              #EC4899;  /* Pink   — accent */

  /* Heatmap ramp (risk → opportunity) */
  --heat-0:              #EF4444;  /* High risk */
  --heat-1:              #F59E0B;  /* Medium risk */
  --heat-2:              #FACC15;  /* Watch */
  --heat-3:              #84CC16;  /* OK */
  --heat-4:              #10B981;  /* Opportunity */

  /* ============================================================
     5. TYPOGRAPHY — Families & sizes
     ============================================================ */
  --font-sans:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px) — matches neptura-typography.json */
  --fs-display-lg:       64px;   /* Display Large — page titles, hero */
  --fs-display-md:       48px;   /* Display Medium — section titles */
  --fs-h1:               36px;
  --fs-h2:               28px;
  --fs-h3:               24px;
  --fs-body-lg:          18px;
  --fs-body:             16px;
  --fs-body-sm:          14px;
  --fs-caption:          12px;
  --fs-mono:             12px;

  /* Line heights */
  --lh-display-lg:       1.1;
  --lh-display-md:       1.2;
  --lh-heading:          1.3;
  --lh-body:             1.6;
  --lh-tight:            1.4;

  /* Weights */
  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;
  --fw-black:            900;

  /* Letter spacing */
  --ls-display-lg:       -1px;      /* Tight for big display */
  --ls-display-md:       -0.5px;
  --ls-normal:           0;
  --ls-caption:          0.5px;     /* Labels breathe */
  --ls-uppercase:        0.08em;    /* UPPERCASE micro-labels */

  /* ============================================================
     6. SPACING — 4px grid
     ============================================================ */
  --space-1:             4px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             20px;
  --space-6:             24px;
  --space-8:             32px;
  --space-10:            40px;
  --space-12:            48px;
  --space-16:            64px;
  --space-20:            80px;
  --space-24:            96px;

  /* ============================================================
     7. RADII — Rectangular, sharp. Rectangles over rounded.
     ============================================================ */
  --radius-0:            0px;       /* Sharp, grid/table */
  --radius-1:            2px;       /* Buttons — spec default */
  --radius-2:            4px;       /* Inputs, chips */
  --radius-3:            8px;       /* Cards */
  --radius-4:            12px;      /* Modal, large panels */
  --radius-full:         9999px;    /* Pills (use sparingly) */

  /* ============================================================
     8. SHADOWS & GLOW — "Data is light"
     Accents behave like neon, not paint. Use Signal Green glow
     on hover for data cards; blue glow for focus rings.
     ============================================================ */
  --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:           0 12px 32px rgba(0, 0, 0, 0.5);

  --glow-green:          0 0 24px rgba(16, 185, 129, 0.35), 0 0 1px rgba(16, 185, 129, 0.8);
  --glow-blue:           0 0 24px rgba(59, 130, 246, 0.35), 0 0 1px rgba(59, 130, 246, 0.8);
  --glow-orange:         0 0 24px rgba(245, 158, 11, 0.35), 0 0 1px rgba(245, 158, 11, 0.8);

  --ring-focus:          0 0 0 2px var(--surface-900), 0 0 0 4px var(--neptura-blue);

  /* ============================================================
     9. MOTION
     Crisp, short, no bounces. Data moves deterministically.
     ============================================================ */
  --ease-standard:       cubic-bezier(0.2, 0, 0, 1);
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
  --dur-instant:         80ms;
  --dur-fast:            160ms;
  --dur-base:            240ms;
  --dur-slow:            400ms;

  /* ============================================================
    10. Z-INDEX
     ============================================================ */
  --z-base:              0;
  --z-sticky:            100;
  --z-overlay:           1000;
  --z-modal:             1100;
  --z-tooltip:           1200;
}

/* ============================================================
   SEMANTIC BASE STYLES
   Apply these to the page for default Neptura look.
   ============================================================ */

body {
  background: var(--surface-900);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-black);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--ls-display-lg);
}

h2 {
  font-size: var(--fs-display-md);
  font-weight: var(--fw-black);
  line-height: var(--lh-display-md);
  letter-spacing: var(--ls-display-md);
}

h3 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

h4 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

h5 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--space-4) 0;
  text-wrap: pretty;
}

.lead,
p.lead {
  font-size: var(--fs-body-lg);
  color: var(--fg-1);
}

small, .caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caption);
  color: var(--fg-3);
}

.eyebrow,
.label-uppercase {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  color: var(--fg-3);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-feature-settings: 'zero';
}

/* Financial / numeric / coordinate displays — tabular figures */
.numeric,
.kpi {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Giant KPI display (dashboards) */
.kpi {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-md);
  line-height: 1;
  color: var(--fg-1);
  letter-spacing: -0.02em;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
a:hover { border-bottom-color: var(--fg-link); }

hr {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: var(--space-6) 0;
}

::selection {
  background: rgba(59, 130, 246, 0.35);
  color: var(--fg-1);
}