/* ============================================================================
   BioBits.CL — Chile Salvaje · Core Tokens
   Visual system: "Andean Glitch" = naturaleza andina + cyberpunk + data-viz.
   Dark-first. Import this file, then use the CSS variables below.
   Fonts loaded from Google Fonts (per Brand Bible — see README).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* Display family — self-hosted brand font (uploaded) */
@font-face {
  font-family: 'Orbitron';
  src: url('fonts/Orbitron-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------
     FONT FAMILIES — per Brand Bible
     --------------------------------------------------------------------- */
  --font-display: 'Orbitron', system-ui, sans-serif;      /* titulares, uppercase, geométrico */
  --font-body:    'Montserrat', system-ui, sans-serif;    /* cuerpo, sentence case */
  --font-mono:    'Share Tech Mono', ui-monospace, monospace; /* datos / HUD / labels */

  /* ---------------------------------------------------------------------
     CORE PALETTE — the five official colors
     --------------------------------------------------------------------- */
  --obsidian:  #121212;  /* Obsidian Black — base */
  --cyan:      #00F0FF;  /* Electric Cyan — primary accent, HUD, borders, focus */
  --lime:      #C4F947;  /* Neon Lime — emphasis, CTA, key figures */
  --violet:    #7000FF;  /* Ultraviolet — secondary glitch / shadow (moderate use) */
  --white:     #FFFFFF;  /* Pure White — primary text */

  /* ---------------------------------------------------------------------
     NEUTRALS — obsidian-anchored dark scale
     --------------------------------------------------------------------- */
  --void:   #080809;  /* deepest, behind everything */
  --bg-0:   #121212;  /* page background (obsidian) */
  --bg-1:   #18181A;  /* base surface */
  --bg-2:   #1E1F22;  /* raised surface / cards */
  --bg-3:   #26272B;  /* hover surface / inputs */
  --bg-4:   #303137;  /* active / selected */

  --line:        #2C2D32;  /* hairline borders */
  --line-strong: #3A3B42;  /* emphasized borders */
  --line-cyan:   rgba(0,240,255,0.32);  /* HUD / focus border */

  --fg-0: #FFFFFF;  /* primary text */
  --fg-1: #BDC1C8;  /* secondary text */
  --fg-2: #82868F;  /* tertiary / muted */
  --fg-3: #4C4F57;  /* disabled / faint */

  /* ---------------------------------------------------------------------
     BRAND SHADES & TINTS
     --------------------------------------------------------------------- */
  --cyan-bright: #7CF8FF;
  --cyan-deep:   #00B3BF;
  --cyan-dim:    #0A4A50;
  --lime-deep:   #9BD41F;
  --violet-bright: #9B4DFF;
  --violet-deep:   #4A0BA8;

  --cyan-tint:   rgba(0,240,255,0.10);
  --cyan-tint-2: rgba(0,240,255,0.18);
  --lime-tint:   rgba(196,249,71,0.12);
  --violet-tint: rgba(112,0,255,0.16);

  /* ---------------------------------------------------------------------
     SEMANTIC COLORS
     --------------------------------------------------------------------- */
  --primary:      var(--cyan);
  --primary-fg:   #00171A;   /* text on a solid cyan fill */
  --accent:       var(--lime);
  --accent-fg:    #16210A;   /* text on a solid lime fill */

  /* Conservation-status semantics (IUCN-style) */
  --status-lc:  #2EE6A6;  /* Preocupación Menor */
  --status-nt:  var(--lime);  /* Casi Amenazado */
  --status-vu:  #F5C543;  /* Vulnerable */
  --status-en:  #FF7A3D;  /* En Peligro */
  --status-cr:  #FF4D6D;  /* En Peligro Crítico */

  --danger:  #FF4D6D;
  --warning: #F5C543;
  --success: #2EE6A6;

  --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--cyan);

  /* ---------------------------------------------------------------------
     GLOWS & SHADOWS — neon bloom carries elevation
     --------------------------------------------------------------------- */
  --glow-cyan:    0 0 0 1px rgba(0,240,255,0.5), 0 0 18px -2px rgba(0,240,255,0.5);
  --glow-cyan-lg: 0 0 0 1px rgba(0,240,255,0.6), 0 0 44px -6px rgba(0,240,255,0.65);
  --glow-lime:    0 0 0 1px rgba(196,249,71,0.5), 0 0 18px -2px rgba(196,249,71,0.5);
  --glow-violet:  0 0 24px -4px rgba(112,0,255,0.6);
  --glow-text-cyan:   0 0 14px rgba(0,240,255,0.6);
  --glow-text-lime:   0 0 14px rgba(196,249,71,0.55);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.55);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.7);
  --shadow-lg: 0 28px 70px -18px rgba(0,0,0,0.85);

  /* ---------------------------------------------------------------------
     RADII — tight / squared to echo the angular HUD aesthetic
     --------------------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------
     SPACING — 4px base scale
     --------------------------------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;  --dur-med: 240ms;  --dur-slow: 440ms;

  /* ---------------------------------------------------------------------
     TYPE SCALE (semantic) — Orbitron runs WIDE, so display sizes are smaller
     and tracking is tightened.
     --------------------------------------------------------------------- */
  --display:  clamp(40px, 5.2vw, 84px);  /* hero statements */
  --h1:       clamp(32px, 3.6vw, 60px);
  --h2:       clamp(26px, 2.8vw, 42px);
  --h3:       clamp(20px, 1.8vw, 26px);
  --h4:       19px;
  --eyebrow:  13px;
  --body-lg:  19px;
  --body:     16px;
  --body-sm:  14px;
  --caption:  12.5px;
}

/* ============================================================================
   SEMANTIC TYPE CLASSES
   Teko is condensed + tall: always uppercase for display, generous tracking
   only on the mono eyebrow. Montserrat carries all running prose.
   ========================================================================== */

.bb-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-0);
}

.bb-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--h1);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-0);
}

.bb-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h2);
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-0);
}

.bb-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h3);
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--fg-0);
}

/* h4 steps down to Montserrat for legibility at small sizes */
.bb-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--h4);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--fg-0);
}

/* Eyebrow / kicker — recurring mono label above titles */
.bb-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--eyebrow);
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
}

.bb-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--body-lg); line-height: 1.65; color: var(--fg-1); }
.bb-body    { font-family: var(--font-body); font-weight: 400; font-size: var(--body); line-height: 1.65; color: var(--fg-1); }
.bb-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--body-sm); line-height: 1.6; color: var(--fg-1); }
.bb-caption { font-family: var(--font-body); font-size: var(--caption); line-height: 1.45; color: var(--fg-2); }

/* Mono data / coordinates / HUD readouts */
.bb-mono { font-family: var(--font-mono); font-size: var(--body-sm); letter-spacing: 0.03em; color: var(--fg-1); }
.bb-mono-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* ============================================================================
   BRAND TEXT TREATMENTS
   ========================================================================== */
.bb-glow-cyan  { color: var(--cyan); text-shadow: var(--glow-text-cyan); }
.bb-glow-lime  { color: var(--lime); text-shadow: var(--glow-text-lime); }

/* RGB-split glitch — cyan / ultraviolet chromatic aberration (Andean Glitch) */
.bb-glitch {
  position: relative;
  color: var(--fg-0);
  text-shadow: 0.022em 0 var(--violet), -0.022em 0 var(--cyan);
}

/* Cyan→lime gradient text — for hero numerals / key figures, used sparingly */
.bb-gradient-text {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--cyan-bright) 40%, var(--lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}