/* =============================================================================
 * ForestOS — Design Tokens v2
 * Dark tech aesthetic. Heavily inspired by mission-control / Palantir-style
 * dashboards but rooted in forest authenticity. Luminous lichen + cyan data.
 * ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ----- Surfaces — graded dark base --------------------------------- */
  --v2-bg-void:   #04070A;
  --v2-bg-base:   #07100D;
  --v2-bg-elev:   #0C1814;
  --v2-bg-card:   #11201A;
  --v2-bg-card-h: #173023;
  --v2-glass:     rgba(8, 16, 13, 0.72);
  --v2-glass-light: rgba(15, 28, 22, 0.55);

  /* ----- Lines --------------------------------------------------------- */
  --v2-line:        rgba(184, 232, 155, 0.08);
  --v2-line-bright: rgba(184, 232, 155, 0.18);
  --v2-line-strong: rgba(184, 232, 155, 0.35);

  /* ----- Text ---------------------------------------------------------- */
  --v2-text:        #E8EDE6;
  --v2-text-mid:    #B7BFB3;
  --v2-text-muted:  #7A8682;
  --v2-text-faint:  #4A554F;

  /* ----- Accents — tech-forward forest palette ------------------------ */
  --v2-accent:        #B8E89B;          /* luminous lichen */
  --v2-accent-2:      #6FA85A;
  --v2-accent-glow:   rgba(184, 232, 155, 0.45);
  --v2-accent-glow-s: rgba(184, 232, 155, 0.20);

  --v2-cyan:          #67D9FF;          /* data / signal */
  --v2-cyan-dim:      #3A9BB7;
  --v2-cyan-glow:     rgba(103, 217, 255, 0.45);

  --v2-amber:         #FFA640;          /* warning */
  --v2-amber-glow:    rgba(255, 166, 64, 0.40);

  --v2-red:           #FF6B5B;          /* danger */

  /* ----- Fonts --------------------------------------------------------- */
  --v2-font-display: "Space Grotesk", "Inter", -apple-system, system-ui, sans-serif;
  --v2-font-body:    "Inter", -apple-system, system-ui, sans-serif;
  --v2-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ----- Radii --------------------------------------------------------- */
  --v2-r-xs: 4px;
  --v2-r-sm: 6px;
  --v2-r-md: 10px;
  --v2-r-lg: 16px;
  --v2-r-xl: 24px;

  /* ----- Motion -------------------------------------------------------- */
  --v2-ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --v2-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --v2-ease-precise: cubic-bezier(0.4, 0, 0.2, 1);
  --v2-dur-fast: 140ms;
  --v2-dur-base: 280ms;
  --v2-dur-slow: 600ms;

  /* Layout */
  --v2-max: 1320px;
  --v2-gutter: 32px;
}

/* ============================================================================
 * Base — set on body.v2 to scope away from the classic landing
 * ========================================================================= */
body.v2 {
  margin: 0;
  background: var(--v2-bg-void);
  color: var(--v2-text);
  font-family: var(--v2-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "ss02", "cv11";
}
body.v2 ::selection { background: var(--v2-accent); color: var(--v2-bg-void); }
body.v2 a { color: inherit; text-decoration: none; }

/* Type recipes */
.v2-display-1 {
  font-family: var(--v2-font-display); font-weight: 500;
  font-size: clamp(2.75rem, 5vw + 1rem, 6.5rem);
  line-height: 0.95; letter-spacing: -0.04em;
  color: var(--v2-text);
}
.v2-display-2 {
  font-family: var(--v2-font-display); font-weight: 500;
  font-size: clamp(2.25rem, 3.5vw + 0.75rem, 4.5rem);
  line-height: 1; letter-spacing: -0.035em;
  color: var(--v2-text);
}
.v2-display-3 {
  font-family: var(--v2-font-display); font-weight: 500;
  font-size: clamp(1.75rem, 2vw + 0.75rem, 2.5rem);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--v2-text);
}
.v2-eyebrow {
  font-family: var(--v2-font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v2-accent);
}
.v2-mono { font-family: var(--v2-font-mono); }
.v2-lede {
  font-family: var(--v2-font-body); font-size: 18px; line-height: 1.55;
  color: var(--v2-text-mid); max-width: 660px;
}

/* Container */
.v2-container { max-width: var(--v2-max); margin: 0 auto; padding: 0 var(--v2-gutter); }
@media (max-width: 720px) { .v2-container { padding: 0 20px; } }

/* Glow utility */
.v2-glow { box-shadow: 0 0 0 1px var(--v2-accent), 0 0 40px var(--v2-accent-glow-s); }

/* Tech grid — used as section backgrounds */
.v2-grid-bg {
  background-image:
    linear-gradient(rgba(184,232,155,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,232,155,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
}