/* =========================================================================
   PLANT ASSOCIATES — Design Tokens
   Dark luxury, cinematic, premium digital studio.
   ========================================================================= */

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

:root {
  /* ---------- BACKGROUNDS ---------- */
  --bg-void: #050816;          /* deepest, page background */
  --bg-night: #0B1120;         /* section backgrounds */
  --bg-slate: #111827;         /* raised surfaces, cards */
  --bg-elevated: #1A2238;      /* hover state for cards */

  /* ---------- FOREGROUNDS ---------- */
  --fg-primary: #F4F6FB;
  --fg-secondary: rgba(244, 246, 251, 0.66);
  --fg-tertiary: rgba(244, 246, 251, 0.42);
  --fg-quaternary: rgba(244, 246, 251, 0.22);

  /* ---------- ACCENTS ---------- */
  --accent-electric: #5B8DFF;
  --accent-electric-soft: rgba(91, 141, 255, 0.15);
  --accent-cyan: #22D3EE;
  --accent-violet: #A78BFA;
  --accent-magenta: #F472B6;

  /* signature gradient — atmospheric, not graphic */
  --gradient-signature: linear-gradient(135deg, #5B8DFF 0%, #A78BFA 50%, #22D3EE 100%);
  --gradient-signature-soft: linear-gradient(135deg, rgba(91,141,255,0.4) 0%, rgba(167,139,250,0.4) 50%, rgba(34,211,238,0.4) 100%);
  --gradient-glow-radial: radial-gradient(circle at center, rgba(91,141,255,0.35) 0%, rgba(167,139,250,0.15) 35%, transparent 70%);

  /* ---------- BORDERS ---------- */
  --border-hairline: 1px solid rgba(255, 255, 255, 0.06);
  --border-default: 1px solid rgba(255, 255, 255, 0.08);
  --border-strong: 1px solid rgba(255, 255, 255, 0.14);
  --border-accent: 1px solid rgba(91, 141, 255, 0.4);

  /* ---------- SHADOWS / GLOWS ---------- */
  --glow-sm: 0 0 24px rgba(91, 141, 255, 0.15);
  --glow-md: 0 0 48px rgba(91, 141, 255, 0.25), 0 0 96px rgba(167, 139, 250, 0.15);
  --glow-lg: 0 0 120px rgba(91, 141, 255, 0.35), 0 0 240px rgba(34, 211, 238, 0.18);
  --shadow-card: 0 24px 48px -12px rgba(0, 0, 0, 0.5);

  /* ---------- TYPOGRAPHY — FAMILIES ---------- */
  --font-display: "Space Grotesk", "Neue Montreal", system-ui, sans-serif;
  --font-body: "Inter", "Satoshi", "General Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ---------- TYPOGRAPHY — SCALE ---------- */
  --type-display-xl: clamp(56px, 9vw, 160px);   /* hero headline */
  --type-display-lg: clamp(48px, 6.5vw, 112px); /* section headlines */
  --type-display-md: clamp(36px, 4.5vw, 72px);
  --type-display-sm: clamp(28px, 3vw, 48px);
  --type-h1: 56px;
  --type-h2: 40px;
  --type-h3: 28px;
  --type-h4: 20px;
  --type-body-lg: 18px;
  --type-body: 16px;
  --type-body-sm: 14px;
  --type-caption: 12px;
  --type-mono: 13px;

  /* ---------- LETTER SPACING ---------- */
  --tracking-tightest: -0.04em;
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.16em;

  /* ---------- LINE HEIGHT ---------- */
  --leading-display: 0.95;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* ---------- SPACING (4px grid) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;
  --space-64: 256px;
  --space-section: clamp(96px, 14vh, 192px);
  --space-page-x: clamp(24px, 6vw, 96px);

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* ---------- MOTION ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quad: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-micro: 120ms;
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
  --duration-cinematic: 1200ms;

  /* ---------- LAYOUT ---------- */
  --max-content: 1440px;
  --max-prose: 720px;
  --grid-cols: 12;
  --grid-gutter: clamp(16px, 2vw, 32px);

  /* ---------- BLUR ---------- */
  --blur-glass: blur(24px) saturate(140%);
  --blur-soft: blur(80px);
  --blur-strong: blur(160px);
}

/* =========================================================================
   SEMANTIC ELEMENTS
   ========================================================================= */

html, body {
  background: var(--bg-void);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--type-display-lg); line-height: var(--leading-display); letter-spacing: var(--tracking-tightest); }
h2 { font-size: var(--type-display-md); }
h3 { font-size: var(--type-display-sm); }
h4 { font-size: var(--type-h4); letter-spacing: var(--tracking-tight); }

p {
  color: var(--fg-secondary);
  font-size: var(--type-body-lg);
  line-height: var(--leading-normal);
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--fg-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-in-out-quad), opacity var(--duration-fast) var(--ease-in-out-quad);
}
a:hover { color: var(--accent-electric); }

code, .mono, kbd {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: var(--tracking-normal);
}

::selection {
  background: rgba(91, 141, 255, 0.35);
  color: var(--fg-primary);
}

/* =========================================================================
   UTILITY CLASSES (for cards / kits)
   ========================================================================= */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-tertiary);
}

.display-xl { font-family: var(--font-display); font-weight: 500; font-size: var(--type-display-xl); line-height: var(--leading-display); letter-spacing: var(--tracking-tightest); }
.display-lg { font-family: var(--font-display); font-weight: 500; font-size: var(--type-display-lg); line-height: var(--leading-display); letter-spacing: var(--tracking-tightest); }

.text-gradient {
  background: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  background: rgba(11, 17, 32, 0.6);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: var(--border-default);
}

.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}

.noise {
  position: relative;
}
.noise::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}