/*
 * DISRUPT Design System — Colors & Typography
 * ============================================
 * Fonts:
 *   - GeistVF (variable)  → heading/display, replaces generic scaffold
 *   - GeistMonoVF (variable) → code/mono accent
 *   - Inter (headings)     → Google Fonts fallback / secondary heading
 *   - DM Sans (body)       → Google Fonts body text
 * @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap");
 */

/* ─── LOCAL BRAND FONTS ─── */
@font-face {
  font-family: 'Geist';
  src: url('fonts/GeistVF.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMonoVF.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────
   BASE COLOR TOKENS
───────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg-base:        #E8ECEF;  /* primary page background */
  --color-bg-surface:     #D8DCDF;  /* cards, secondary surfaces */
  --color-bg-warm:        #F4F1EE;  /* warm sections (About, Commitment) */
  --color-bg-cream:       #FAFFFF;  /* glass highlights, lightest surface */
  --color-bg-muted:       #E2E7E4;  /* muted accent surface */

  /* Text / Ink */
  --color-ink:            #1E1E1E;  /* primary text, headings, buttons */
  --color-ink-accent:     #3A3A3A;  /* secondary text, subheadings */
  --color-ink-40:         rgba(30,30,30,0.40); /* body copy, descriptions */
  --color-ink-30:         rgba(30,30,30,0.30); /* labels, eyebrows */
  --color-ink-20:         rgba(30,30,30,0.20); /* borders, dividers */
  --color-ink-10:         rgba(30,30,30,0.10); /* subtle fills */
  --color-ink-05:         rgba(30,30,30,0.05); /* icon bg fills */

  /* Brand Gradient */
  --gradient-brand: linear-gradient(135deg, #e8ecef, #d8dcdf, #e2e7e4, #faffff);

  /* Glass */
  --glass-bg:             rgba(250,255,255,0.45);
  --glass-bg-hover:       rgba(250,255,255,0.65);
  --glass-border:         rgba(255,255,255,0.60);
  --glass-border-hover:   rgba(255,255,255,0.80);

  /* ─── SEMANTIC ALIASES ─── */
  --bg-page:              var(--color-bg-base);
  --bg-card:              var(--glass-bg);
  --bg-section-alt:       var(--color-bg-warm);
  --text-primary:         var(--color-ink);
  --text-secondary:       var(--color-ink-40);
  --text-label:           var(--color-ink-30);
  --border-subtle:        var(--color-ink-10);
  --border-medium:        var(--color-ink-20);
  --fill-icon:            var(--color-ink-05);

  /* ─────────────────────────────────────────────
     TYPOGRAPHY TOKENS
  ───────────────────────────────────────────── */
  --font-heading:         'Geist', 'Inter', sans-serif;
  --font-body:            'DM Sans', sans-serif;
  --font-mono:            'Geist Mono', 'Menlo', monospace;

  /* Scale */
  --text-xs:   0.75rem;   /* 12px — tags, labels */
  --text-sm:   0.875rem;  /* 14px — small body */
  --text-base: 1rem;      /* 16px — body */
  --text-lg:   1.125rem;  /* 18px — lead */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */
  --text-8xl:  6rem;      /* 96px — hero display */

  /* Leading */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter spacing */
  --tracking-display: -0.04em;  /* hero DISRUPT text */
  --tracking-eyebrow: 0.2em;    /* section labels */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;

  /* Weights */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* ─────────────────────────────────────────────
     SPACING
  ───────────────────────────────────────────── */
  --space-1:   0.25rem;
  --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-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ─────────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────────── */
  --radius-sm:   0.5rem;   /* 8px — tags */
  --radius-md:   0.75rem;  /* 12px — inputs */
  --radius-lg:   1rem;     /* 16px — small cards */
  --radius-xl:   1.25rem;  /* 20px — cards */
  --radius-2xl:  1.5rem;   /* 24px — large cards */
  --radius-full: 9999px;   /* pills — buttons, tags */

  /* ─────────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────────── */
  --shadow-soft:  0 2px 20px rgba(0,0,0,0.04), 0 0 60px rgba(0,0,0,0.02);
  --shadow-card:  0 4px 30px rgba(0,0,0,0.04);
  --shadow-hover: 0 8px 40px rgba(0,0,0,0.08), 0 0 80px rgba(0,0,0,0.03);
  --shadow-btn:   0 8px 40px rgba(0,0,0,0.08);
  --shadow-ink:   0 8px 40px rgba(30,30,30,0.10);

  /* ─────────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────────── */
  --transition-fast:   all 0.2s ease;
  --transition-base:   all 0.3s ease;
  --transition-slow:   all 0.5s ease;
  --ease-out-cubic:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-bounce:       cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPE CLASSES
───────────────────────────────────────────── */

/* Display hero — DISRUPT animated title */
.t-display {
  font-family: var(--font-heading);
  font-size: var(--text-8xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

/* Section H2 heading */
.t-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

/* Card H3 */
.t-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

/* Eyebrow / section label */
.t-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-30);
}

/* Lead / tagline */
.t-lead {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-40);
}

/* Body paragraph */
.t-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-40);
}

/* Small / caption */
.t-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-40);
}

/* Nav link */
.t-nav {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-40);
}

/* Button label */
.t-btn {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: white;
}

/* ─────────────────────────────────────────────
   GLASS CARD UTILITY
───────────────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
}

.glass-card-hover {
  transition: var(--transition-slow);
}
.glass-card-hover:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────
   NOISE TEXTURE OVERLAY
───────────────────────────────────────────── */
.noise-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ─────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────── */
@keyframes fade-up {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(2deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.animate-fade-up   { animation: fade-up 0.8s ease-out forwards; }
.animate-float     { animation: float 6s ease-in-out infinite; }
.animate-shimmer   { animation: shimmer 3s linear infinite; }