/* =====================================================================
   Nxt7a (NextSevenAgain) – Design Tokens
   Earth intelligence / nature tech platform
   --------------------------------------------------------------------- */

/* ── FONTS ─────────────────────────────────────────────────────────────
   Nxt7a uses Helvetica Neue LT Pro, served by Adobe Fonts (kit ypa4rot).
   ---------------------------------------------------------------------- */
@import url("https://use.typekit.net/ypa4rot.css");

:root {
  /* === BRAND COLORS ============================================== */
  /* The signature Nxt7a green – used in the logo, in headlines, in CTA
     buttons, and as the dominant accent throughout the product. */
  --nxt-green:            #3E9B4C;   /* primary brand */
  --nxt-green-700:        #15803d;   /* darker variant used by shadcn primary */
  --nxt-green-600:        #16a34a;   /* gradient hover stop */
  --nxt-green-emerald:    #059669;   /* gradient pair w/ green-600 */
  --nxt-forest:           #1a4d2e;   /* deep section bg ("features bar", CTA) */
  --nxt-forest-darker:    #0d2818;   /* even deeper */
  --nxt-mint-bg:          #F1FEF5;   /* near-white minty surface ("Simple Software") */
  --nxt-mint-50:          #f0fdf4;   /* tailwind green-50 */
  --nxt-mint-100:         #dcfce7;   /* tailwind green-100 – used in tour */
  --nxt-mint-200:         #bbf7d0;
  --nxt-green-300-text:   #86efac;   /* "green-300" pale text on dark */

  /* === NEUTRALS ================================================== */
  --nxt-black:            #0a0a0a;   /* hero/quote/footer background */
  --nxt-black-pure:       #000000;   /* "problem" section background */
  --nxt-ink:              #111111;   /* primary text on light */
  --nxt-gray-900:         #111827;
  --nxt-gray-800:         #1f2937;
  --nxt-gray-700:         #374151;
  --nxt-gray-600:         #4b5563;
  --nxt-gray-500:         #6b7280;
  --nxt-gray-400:         #9ca3af;
  --nxt-gray-300:         #d1d5db;
  --nxt-gray-200:         #e5e7eb;
  --nxt-gray-100:         #f3f4f6;
  --nxt-gray-50:          #f9fafb;
  --nxt-white:            #ffffff;

  /* === SEMANTIC SURFACES ========================================= */
  --bg:                   var(--nxt-white);
  --bg-tint:              var(--nxt-mint-bg);
  --bg-app:               linear-gradient(135deg, #f9fafb 0%, #f0fdf4 100%); /* default app gradient */
  --bg-dark:              var(--nxt-black);
  --bg-forest:            var(--nxt-forest);

  --fg1:                  var(--nxt-gray-900);  /* primary body */
  --fg2:                  var(--nxt-gray-600);  /* secondary copy */
  --fg3:                  var(--nxt-gray-500);  /* muted */
  --fg-on-dark:           var(--nxt-white);
  --fg-on-dark-muted:     rgba(255,255,255,0.75);
  --fg-on-forest:         #d1f5dc;              /* "green-200/80" copy on forest */

  --brand:                var(--nxt-green);
  --brand-strong:         var(--nxt-green-700);

  /* === BORDERS & DIVIDERS ======================================== */
  --border:               #e5e7eb;              /* gray-200, the default */
  --border-soft:          #f3f4f6;              /* gray-100 */
  --border-green:         #dce6df;              /* HSL 138 20% 88% */
  --border-on-dark:       rgba(255,255,255,0.18);
  --divider-forest:       rgba(20,83,45,0.5);   /* between feature columns */

  /* === EARTH-TONE RAMP (warm) =====================================
     The complementary palette to the green spine. Used for cautionary
     states (instead of yellow/red), and as the second axis of bivariate
     data viz (vegetation × soil/aridity). Cream → ochre → umber. */
  --nxt-cream:            #f5f1ea;
  --nxt-tan:              #d4b896;
  --nxt-ochre:            #c08552;
  --nxt-umber:            #8b5a3c;
  --nxt-coffee:           #6b3e1f;
  --nxt-coffee-deep:      #3d2614;

  /* === STATE COLORS (semantic) ===================================
     Green for success only. Cautionary states live on the earth ramp
     – no blues, yellows, or reds in the Nxt7a palette. */
  --success:              var(--nxt-green-700);
  --success-bg:           #dcfce7;
  --success-fg:           #15803d;
  --pending:              var(--nxt-ochre);
  --pending-bg:           #efe6d6;
  --pending-fg:           #7a5a2f;
  --caution:              var(--nxt-umber);
  --caution-bg:           #e8dccc;
  --caution-fg:           #6b3e1f;
  --critical:             var(--nxt-coffee-deep);
  --critical-bg:          #d4c4a8;
  --critical-fg:          #3d2614;

  /* Legacy aliases (kept for compatibility) – prefer the names above. */
  --warning:              var(--pending);
  --warning-bg:           var(--pending-bg);
  --warning-fg:           var(--pending-fg);
  --danger:               var(--critical);
  --danger-bg:            var(--critical-bg);
  --danger-fg:            var(--critical-fg);
  --info:                 var(--nxt-green-700);
  --info-bg:              var(--nxt-mint-100);
  --info-fg:              var(--nxt-green-700);

  /* === ASSET-CLASS TAG COLORS ====================================
     The Base44 dashboard ships a rainbow palette; we restrain it to
     green-and-grey to stay on the brand's green spine. Differentiation
     comes from green saturation + grey neutrality, not hue. */
  --tag-residential-bg:   #dcfce7; --tag-residential-fg:   #15803d;
  --tag-commercial-bg:    #e8f4ea; --tag-commercial-fg:    #166534;
  --tag-industrial-bg:    #f1f5f9; --tag-industrial-fg:    #334155;
  --tag-parkland-bg:      #bbf7d0; --tag-parkland-fg:      #14532d;
  --tag-education-bg:     #e5e7eb; --tag-education-fg:     #1f2937;
  --tag-medical-bg:       #f3f4f6; --tag-medical-fg:       #4b5563;
  --tag-transport-bg:     #f0fdf4; --tag-transport-fg:     #15803d;
  --tag-primary-bg:       #d1fae5; --tag-primary-fg:       #065f46;
  --tag-water-bg:         #ecfccb; --tag-water-fg:         #3f6212;
  --tag-other-bg:         #f9fafb; --tag-other-fg:         #6b7280;

  /* === DATA-VIZ: CATEGORICAL CHART PALETTE =======================
     Six categorical series colours, mapped to the official UN
     Sustainable Development Goal colours for the six goals Nxt7a
     supports (11, 12, 13, 14, 15, 17). These are an EXTERNAL mandated
     brand (like the Landsat365/USGS-NASA credit) – do NOT recolour
     them to the Nxt7a green/earth ramp. Sample in order; wraps after six.
     amCharts 5:
       series.get("colors").set("colors",
         ["#FD9D24","#BF8B2E","#3F7E44","#0A97D9","#56C02B","#19486A"]
           .map(c => am5.color(c)));                                    */
  --chart-1:              #FD9D24;  /* SDG 11 – Sustainable Cities & Communities */
  --chart-2:              #BF8B2E;  /* SDG 12 – Responsible Consumption & Production */
  --chart-3:              #3F7E44;  /* SDG 13 – Climate Action */
  --chart-4:              #0A97D9;  /* SDG 14 – Life Below Water */
  --chart-5:              #56C02B;  /* SDG 15 – Life on Land */
  --chart-6:              #19486A;  /* SDG 17 – Partnerships for the Goals */
  /* 7–12: muted companions of 1–6 (≈45% toward neutral grey). Use when a
     chart needs >6 series – the sequence runs 1→12 in order, vivid then
     muted, so adjacent muted tones never sit next to their vivid twin. */
  --chart-7:              #C5904D;  /* muted SDG 11 */
  --chart-8:              #A38653;  /* muted SDG 12 */
  --chart-9:              #5C7F5F;  /* muted SDG 13 */
  --chart-10:             #3F8DB1;  /* muted SDG 14 */
  --chart-11:             #69A351;  /* muted SDG 15 */
  --chart-12:             #476174;  /* muted SDG 17 */

  /* === DATA-VIZ: CHOROPLETH RAMP =================================
     Sequential green ramp (forest → mint) for single-variable
     choropleth maps and ordered scales. Deep forest = high / intact /
     dense cover; mint = low / sparse. */
  --choropleth-1:         #14532d;  /* deep forest */
  --choropleth-2:         #2f7a45;  /* forest green */
  --choropleth-3:         #4ca368;  /* green */
  --choropleth-4:         #86cda0;  /* light green */
  --choropleth-5:         #d8f3e3;  /* mint */

  /* Bivariate 3×3 – orange × dark-blue. Columns left→right = increasing
     blue; rows top→bottom = increasing orange; high-high corner darkens. */
  --biv-11: #d3d3d3; --biv-12: #728898; --biv-13: #174260;
  --biv-21: #dbb482; --biv-22: #76745e; --biv-23: #18383b;
  --biv-31: #e68f21; --biv-32: #7c5c18; --biv-33: #192c0f;

  /* === TYPOGRAPHY ================================================ */
  --font-sans:            "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-cond:            "helvetica-neue-lt-pro-cond", "Helvetica Neue Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:            ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Numerals – most copy is set in regular weights; bold for emphasis,
     light only on the cinematic quote slide. */
  --fw-light:             300;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;

  /* Modular type scale – tuned to the marketing site + product UI. */
  --fs-display:           4.5rem;   /* 72px – hero headline (lg) */
  --fs-h1:                3rem;     /* 48px – section H2s ("AI Powered Earth Intelligence Platform") */
  --fs-h2:                2.25rem;  /* 36px */
  --fs-h3:                1.5rem;   /* 24px – card titles / Recent Assessments */
  --fs-h4:                1.25rem;  /* 20px */
  --fs-lg:                1.125rem; /* 18px – lead paragraphs */
  --fs-base:              1rem;     /* 16px */
  --fs-sm:                0.875rem; /* 14px – body in dense UI */
  --fs-xs:                0.75rem;  /* 12px – labels, captions, eyebrow */
  --fs-2xs:               0.6875rem;/* 11px – fine print, CC credits */

  --lh-tight:             1.1;
  --lh-snug:              1.25;
  --lh-normal:            1.5;
  --lh-relaxed:           1.625;

  --tracking-tight:       -0.02em;
  --tracking-normal:      0;
  --tracking-wide:        0.05em;
  --tracking-eyebrow:     0.1em;    /* uppercase section labels in sidebar */

  /* === SPACING (4px base) ======================================== */
  --space-1:              0.25rem;  /* 4 */
  --space-2:              0.5rem;   /* 8 */
  --space-3:              0.75rem;  /* 12 */
  --space-4:              1rem;     /* 16 */
  --space-5:              1.25rem;  /* 20 */
  --space-6:              1.5rem;   /* 24 */
  --space-8:              2rem;     /* 32 */
  --space-10:             2.5rem;   /* 40 */
  --space-12:             3rem;     /* 48 */
  --space-14:             3.5rem;   /* 56 – md:px-14 marketing gutter */
  --space-16:             4rem;     /* 64 */
  --space-20:             5rem;     /* 80 – marketing section py */
  --space-24:             6rem;     /* 96 – quote section py */

  /* === RADII ===================================================== */
  --radius-sm:            0.25rem;  /* 4 – small buttons */
  --radius:               0.5rem;   /* 8 – DEFAULT, --radius from globals.css */
  --radius-md:            0.5rem;   /* alias */
  --radius-lg:            0.75rem;  /* 12 – Cards default rounded-xl is 0.75 */
  --radius-xl:            1rem;     /* 16 – image cards, larger surfaces */
  --radius-2xl:           1.25rem;  /* 20 – stat icon wells */
  --radius-pill:          9999px;   /* badges, status pills */

  /* === SHADOWS =================================================== */
  /* The product uses a moderate elevation stack – shadow-sm / shadow /
     shadow-lg / shadow-xl, plus the cinematic drop-shadow-2xl reserved
     for screenshot panels on the marketing site. */
  --shadow-xs:            0 1px 2px 0 rgba(16,24,40,0.05);
  --shadow-sm:            0 1px 3px 0 rgba(16,24,40,0.10), 0 1px 2px -1px rgba(16,24,40,0.05);
  --shadow:               0 4px 6px -1px rgba(16,24,40,0.08), 0 2px 4px -2px rgba(16,24,40,0.06);
  --shadow-lg:            0 10px 15px -3px rgba(16,24,40,0.10), 0 4px 6px -4px rgba(16,24,40,0.05);
  --shadow-xl:            0 20px 25px -5px rgba(16,24,40,0.10), 0 8px 10px -6px rgba(16,24,40,0.04);
  --shadow-2xl:           0 25px 50px -12px rgba(16,24,40,0.25);
  --shadow-green:         0 10px 25px -5px rgba(62,155,76,0.35); /* CTA glow */
  --ring-focus:           0 0 0 3px rgba(62,155,76,0.35);

  /* === MOTION ==================================================== */
  --ease-standard:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast:        150ms;
  --duration-base:        200ms;
  --duration-slow:        300ms;
}

/* =====================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use these directly OR mirror them in your component CSS.
   ===================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.nxt-display {
  font-size: clamp(2.5rem, 5vw + 1rem, var(--fs-display));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-on-dark);
}

.nxt-h1 {
  font-size: clamp(1.875rem, 3vw + 0.5rem, var(--fs-h1));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.nxt-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.nxt-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.nxt-h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.nxt-lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.nxt-body {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg1);
}

.nxt-body-sm {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.nxt-caption {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--fg3);
}

.nxt-eyebrow {
  /* Sidebar section labels: SMALL · BOLD · UPPERCASE · WIDE TRACKING */
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}

.nxt-cite {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--fg3);
}

.nxt-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* Headline-on-dark variant used in hero + CTA */
.nxt-display--on-dark,
.nxt-h1--on-dark,
.nxt-h2--on-dark {
  color: var(--fg-on-dark);
}
.nxt-lead--on-dark { color: var(--fg-on-dark-muted); }
.nxt-lead--on-forest { color: var(--fg-on-forest); }

/* The signature accent: a phrase coloured in brand green inside a dark
   headline. Use sparingly – usually one or two words. */
.nxt-accent { color: var(--brand); }