/* ============================================================
   global.css — design tokens + base typography on bare elements
   ============================================================ */

:root {
  /* === Color: surfaces === */
  --bg-primary: #0a0e14;
  --bg-secondary: #131821;
  --bg-tertiary: #0f141d;
  --bg-elevated: #1a212d;

  /* === Color: borders === */
  --border: #1f2836;

  /* === Color: text === */
  --text-primary: #e4e7eb;
  --text-secondary: #b3b9c4;
  --text-muted: #8b93a1;
  --text-faint: #6b7280;

  /* === Color: accent (brand blue) === */
  --accent: #3b82f6;
  --accent-bright: #7cb7ff;
  --accent-soft: #a5cdff;
  --accent-deep: #1e3a8a;
  --accent-deeper: #2563eb;
  --accent-soft-hover: #a3c9ff;
  --accent-dim: rgba(59, 130, 246, 0.10);
  --accent-glow: rgba(59, 130, 246, 0.30);
  --accent-glow-strong: rgba(124, 183, 255, 0.45);
  --accent-border-translucent: rgba(59, 130, 246, 0.25);

  /* === Color: scrim/atmosphere === */
  --scrim-modal: rgba(5, 8, 12, 0.78);
  --scrim-card: rgba(10, 14, 20, 0.7);
  --scrim-header: rgba(10, 14, 20, 0.85);
  --shadow-rgb-deeper: rgba(0, 0, 0, 0.6);
  --shadow-rgb-deepest: rgba(0, 0, 0, 0.7);
  --shadow-rgb-card: rgba(0, 0, 0, 0.4);
  --shadow-rgb-text-strong: rgba(0, 0, 0, 0.25);
  --shadow-rgb-text-soft: rgba(0, 0, 0, 0.2);
  --on-brand-fg: #fff;
  --on-brand-fg-soft: rgba(255, 255, 255, 0.85);
  --on-brand-fg-dim: rgba(255, 255, 255, 0.55);
  --on-brand-icon: rgba(255, 255, 255, 0.95);
  --on-brand-edge: rgba(255, 255, 255, 0.08);
  --hero-light-core: #b8d6ff;

  /* === Brand gradients (presence cards) === */
  --brand-linkedin: linear-gradient(135deg, #0a4f8c 0%, #0a66c2 60%, #0e4d8e 100%);
  --brand-github: linear-gradient(135deg, #6e40c9 0%, #8957e5 50%, #5b2eaf 100%);
  --brand-kaggle: linear-gradient(135deg, #0d8ec0 0%, #20beff 50%, #0d8ec0 100%);
  --brand-avid: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #0c1f4a 100%);
  --brand-datagamer: linear-gradient(135deg, #0d4d6e 0%, #1d7da3 45%, #2a3b6e 100%);

  /* === Spacing scale (rem-based for content rhythm) === */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;

  /* === Spacing: pixel offsets (for absolute positioning + tag padding) === */
  --space-px-1: 4px;
  --space-px-2: 6px;
  --space-px-3: 7px;
  --space-px-4: 8px;
  --space-px-5: 9px;
  --space-px-6: 16px;
  --space-px-7: 28px;
  --space-px-8: 200px;

  /* === Typography: font families === */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* === Typography: font sizes === */
  --font-size-base-body: 15px;       /* body root font-size */
  --font-size-2xs: 0.6rem;
  --font-size-xs: 0.62rem;
  --font-size-sm: 0.7rem;
  --font-size-cert-meta: 0.72rem;
  --font-size-cert-issuer: 0.75rem;
  --font-size-md: 0.78rem;
  --font-size-base: 0.85rem;
  --font-size-stat-value: 0.88rem;
  --font-size-presence: 0.9rem;
  --font-size-card-desc: 0.92rem;
  --font-size-body: 0.95rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.05rem;
  --font-size-2xl: 1.1rem;
  --font-size-3xl: 1.2rem;
  --font-size-4xl: 1.4rem;
  --font-size-presence-name: 1.65rem;
  --font-size-h2-fluid: clamp(1.85rem, 3vw, 2.4rem);
  --font-size-h2-large: clamp(2.25rem, 4vw, 3rem);
  --font-size-tab: clamp(2rem, 4vw, 2.75rem);
  --font-size-h1: clamp(2.5rem, 6vw, 4.5rem);
  --font-size-section-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --font-size-modal-headline: clamp(1.4rem, 2.4vw, 1.85rem);
  --font-size-lead: clamp(1.05rem, 1.6vw, 1.2rem);
  --font-size-monogram: 9rem;        /* presence monogram glyph */

  /* === Border radius === */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-3xl: 16px;
  --radius-pill: 100px;
  --radius-full: 50%;

  /* === Shadows === */
  --shadow-card-hover: 0 12px 32px var(--shadow-rgb-card), 0 0 0 1px var(--on-brand-edge);
  --shadow-modal: 0 32px 80px -20px var(--shadow-rgb-deepest), 0 0 0 1px var(--accent-dim);

  /* === Z-index scale === */
  --z-base: 0;
  --z-content: 1;
  --z-elevated: 2;
  --z-marker: 1;
  --z-close: 5;
  --z-header: 50;
  --z-modal-overlay: 100;
  --z-modal: 101;

  /* === Layout === */
  --container-max: 1180px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --grid-line: rgba(59, 130, 246, 0.04);

  /* === Animation === */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 0.15s;          /* link/button color & border feedback */
  --duration-base: 0.2s;            /* hover state changes (most common) */
  --duration-slow: 0.25s;           /* card/modal state transitions */
  --duration-reveal: 1000ms;
  --stagger-step: 120ms;
}

/* === Body: base canvas === */
body {
  position: relative;

  min-height: 100vh;
  overflow-x: hidden;

  font-family: var(--font-sans);
  font-size: var(--font-size-base-body);
  line-height: 1.6;
  color: var(--text-secondary);

  background: var(--bg-primary);
}

/* Ambient grid background — lives on body, very subtle */
body::before {
  position: fixed;
  inset: 0;
  z-index: var(--z-base);

  content: '';

  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 80%);
  pointer-events: none;

  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 80%);
}

/* Glow blobs — single fixed atmospheric element */
body::after {
  position: fixed;
  top: calc(-1 * var(--space-px-8));
  left: 50%;
  z-index: var(--z-base);

  width: 900px;
  height: 600px;

  content: '';

  background: radial-gradient(ellipse at center, var(--accent-dim) 0%, transparent 60%);
  transform: translateX(-50%);
  pointer-events: none;
}

/* === Headings === */
h1, h2, h3, h4 {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1 {
  font-size: var(--font-size-h1);
  font-weight: 600;
  letter-spacing: -0.03em;
}
h2 {
  font-size: var(--font-size-section-h2);
}
h3 {
  font-size: var(--font-size-3xl);
}
h4 {
  font-size: var(--font-size-lg);
}

/* === Body text === */
p {
  margin-bottom: var(--space-4);

  color: var(--text-muted);
}
p:last-child {
  margin-bottom: 0;
}

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