/* ============================================================
   BEANWATER LABS™ — BASE DESIGN SYSTEM
   /assets/css/base.css
   
   Load this on every page before components.css.
   Contains: tokens, reset, typography, base utilities.
   ============================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {

  /* ── Backgrounds ── */
  --bg-void:      #05080f;   /* page background */
  --bg-base:      #080d18;   /* section alt */
  --bg-surface:   #0d1424;   /* panels / cards */
  --bg-surface-2: #0f1828;   /* elevated panels */
  --bg-surface-3: #131c2e;   /* card hover */
  --bg-inset:     #070b15;   /* recessed wells */

  /* ── Borders ── */
  --border-faint:   #111928;
  --border-subtle:  #1a2640;
  --border-default: #243354;
  --border-strong:  #2e4470;

  /* ── Text ── */
  --text-bright:   #eef4ff;
  --text-primary:  #dce8f8;
  --text-secondary:#7a8eb0;
  --text-tertiary: #3f5070;
  --text-tag:      #2e4468;

  /* ── Accent: Cyan (primary data) ── */
  --cyan:          #00d4ff;
  --cyan-mid:      #0099bb;
  --cyan-dim:      #004455;
  --cyan-glow:     rgba(0, 212, 255, 0.12);

  /* ── Accent: Wet / Blue ── */
  --wet:           #22aaff;
  --wet-mid:       #0066bb;
  --wet-dim:       #001833;
  --wet-glow:      rgba(34, 170, 255, 0.12);

  /* ── Accent: Dry / Red ── */
  --dry:           #ff4444;
  --dry-mid:       #aa1111;
  --dry-dim:       #2a0808;
  --dry-glow:      rgba(255, 68, 68, 0.10);

  /* ── Accent: Caution / Amber ── */
  --amber:         #ffaa00;
  --amber-mid:     #cc6600;
  --amber-dim:     #3d2000;

  /* ── Accent: Agriculture / Green ── */
  --agri:          #44ddaa;
  --agri-mid:      #228866;
  --agri-dim:      #0a2218;
  --agri-glow:     rgba(68, 221, 170, 0.10);

  /* ── Accent: Excess / Magenta ── */
  --excess:        #dd44ff;
  --excess-mid:    #882299;
  --excess-dim:    #220033;

  /* ── Typography ── */
  --font-display:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;
  --font-body:     'IBM Plex Sans', 'Helvetica Neue', sans-serif;

  /* ── Type scale ── */
  --text-2xs:  0.625rem;   /*  10px */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.8125rem;  /*  13px */
  --text-base: 0.9375rem;  /*  15px */
  --text-md:   1.0625rem;  /*  17px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  2rem;       /*  32px */
  --text-3xl:  2.75rem;    /*  44px */
  --text-4xl:  3.75rem;    /*  60px */
  --text-5xl:  5.5rem;     /*  88px */
  --text-display: clamp(4rem, 9vw, 8rem);

  /* ── Spacing (4px base) ── */
  --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 ── */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;

  /* ── Shadows ── */
  --shadow-card:  0 2px 24px rgba(0,0,0,0.6), 0 1px 0 var(--border-subtle);
  --shadow-panel: 0 4px 48px rgba(0,0,0,0.8), 0 1px 0 var(--border-subtle);
  --shadow-lift:  0 8px 64px rgba(0,0,0,0.9);

  /* ── Transitions ── */
  --t: 0.2s ease;
  --t-slow: 0.4s ease;

  /* ── Layout ── */
  --max-w: 1280px;
  --nav-h: 60px;
  --section-px: clamp(var(--sp-6), 4vw, var(--sp-12));
  --section-py: clamp(var(--sp-16), 8vw, var(--sp-32));
}

/* ── 2. RESET ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  background: var(--bg-void);
  color: var(--text-primary);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

/* ── 3. TYPOGRAPHY ─────────────────────────────────────────── */

/* Display headings — Barlow Condensed, all caps */
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-bright);
}

.t-heading-1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-bright);
}

.t-heading-2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.t-heading-3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Section labels — IBM Plex Mono, micro uppercase */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.t-label-cyan {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-mid);
}

/* Body / descriptive text */
.t-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-secondary);
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Monospace data values */
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--text-primary);
}

.t-mono-sm {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.t-value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan);
}

/* ── 4. LAYOUT PRIMITIVES ──────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--section-px);
}

.section {
  padding: var(--section-py) 0;
}

.section-sm {
  padding: var(--sp-16) 0;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-12);
}

/* ── 5. UTILITY CLASSES ────────────────────────────────────── */

/* Colors */
.c-cyan    { color: var(--cyan); }
.c-wet     { color: var(--wet); }
.c-dry     { color: var(--dry); }
.c-amber   { color: var(--amber); }
.c-agri    { color: var(--agri); }
.c-excess  { color: var(--excess); }
.c-muted   { color: var(--text-secondary); }
.c-dim     { color: var(--text-tertiary); }
.c-bright  { color: var(--text-bright); }

/* Backgrounds */
.bg-surface  { background: var(--bg-surface); }
.bg-inset    { background: var(--bg-inset); }

/* Flex / grid shortcuts */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2       { gap: var(--sp-2); }
.gap-4       { gap: var(--sp-4); }
.gap-6       { gap: var(--sp-6); }
.gap-8       { gap: var(--sp-8); }

/* Borders */
.border-t  { border-top: 1px solid var(--border-subtle); }
.border-b  { border-bottom: 1px solid var(--border-subtle); }

/* Visibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── 6. ANIMATIONS ──────────────────────────────────────────── */

@keyframes bw-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes bw-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes bw-spin {
  to { transform: rotate(360deg); }
}

@keyframes bw-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bw-count-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 7. REDUCED MOTION ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 8. FOCUS STYLES ────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── 9. SELECTION ───────────────────────────────────────────── */

::selection {
  background: rgba(0, 212, 255, 0.2);
  color: var(--text-bright);
}

/* ── 10. SCROLLBAR (Webkit) ─────────────────────────────────── */

::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--bg-void); }
::-webkit-scrollbar-thumb   { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }