/* =====================================================
   BASE.CSS — Reset, Design Tokens, Typography
   Insight Futures Institutional Site
   ===================================================== */

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

/* ── Design Tokens ── */
:root {
  /* Backgrounds */
  --bg-primary:    #080C12;
  --bg-secondary:  #0D1420;
  --bg-surface:    #111927;
  --bg-surface-2:  #162030;

  /* Accent */
  --accent-blue:      #0EA5E9;
  --accent-blue-dim:  rgba(14, 165, 233, 0.10);
  --accent-blue-glow: rgba(14, 165, 233, 0.22);
  --accent-teal:      #14B8A6;
  --accent-teal-dim:  rgba(20, 184, 166, 0.10);

  /* Text */
  --text-primary:   #F0F4F8;
  --text-secondary: #A8BCCF;
  --text-muted:     #6B7F96;
  --text-faint:     #3E5060;

  /* Borders */
  --border:        #1A2A3A;
  --border-accent: rgba(14, 165, 233, 0.30);

  /* Semantic */
  --success:      #22C55E;
  --success-dim:  rgba(34, 197, 94, 0.10);
  --warning:      #F59E0B;
  --warning-dim:  rgba(245, 158, 11, 0.10);
  --danger:       #EF4444;
  --danger-dim:   rgba(239, 68, 68, 0.10);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
  --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;
  --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  /* Radius */
  --r-sm: 0.375rem;
  --r-md: 0.625rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;

  /* Shadows */
  --shadow-card:   0 1px 4px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-accent: 0 0 28px rgba(14, 165, 233, 0.14);
  --shadow-glow:   0 0 60px rgba(14, 165, 233, 0.18);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-base:   260ms ease;
  --t-slow:   420ms ease;

  /* Z-index */
  --z-nav:   1000;
  --z-modal: 2000;
}

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

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

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

/* ── Type Scale ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.625rem); }
h4 { font-size: clamp(1rem, 2vw, 1.2rem); }

p { color: var(--text-secondary); line-height: 1.75; }

a { color: var(--accent-blue); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--text-primary); }

img, video, canvas { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; }

/* ── Utilities ── */
.mono        { font-family: var(--font-mono); }
.text-muted  { color: var(--text-muted); }
.text-accent { color: var(--accent-blue); }
.text-teal   { color: var(--accent-teal); }
.text-success{ color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning{ color: var(--warning); }