/**
 * Diatom Technologies Limited — Sovereign Design System Tokens
 * Archetype 06: Kinetic Bento & High-Craft SaaS + Archetype 01: Swiss Editorial
 * Version: 2.0.0
 */

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

:root {
  /* ==========================================================================
     1. COLOR TOKEN MATRIX
     ========================================================================== */
  /* Primary Corporate Inks & Surfaces */
  --diatom-ink-obsidian: #070A0F;
  --diatom-ink-navy: #0F172A;
  --diatom-surface-slate: #1E293B;
  --diatom-surface-elevated: #121A28;
  --diatom-surface-card: #0D1424;
  --diatom-surface-card-hover: #152238;

  /* Primary Accent: Electric Cyan Tech Signal */
  --diatom-cyan: #06B6D4;
  --diatom-cyan-glow: #22D3EE;
  --diatom-cyan-subtle: rgba(6, 182, 212, 0.12);
  --diatom-cyan-border: rgba(6, 182, 212, 0.35);

  /* Secondary Accent: Sovereign Emerald (Uptime, Success, Ledger Guarantees) */
  --diatom-emerald: #10B981;
  --diatom-emerald-glow: #34D399;
  --diatom-emerald-subtle: rgba(16, 185, 129, 0.12);

  /* Tertiary Accent: Sovereign Gold (Conversion, Enterprise Badges) */
  --diatom-gold: #CCA43B;
  --diatom-gold-glow: #F1C453;
  --diatom-gold-subtle: rgba(204, 164, 59, 0.12);
  --diatom-gold-border: rgba(204, 164, 59, 0.35);

  /* Deep Trust Cobalt */
  --diatom-cobalt: #054089;
  --diatom-cobalt-light: #2563EB;
  --diatom-cobalt-glow: rgba(5, 64, 137, 0.45);

  /* Neutral Text & Borders */
  --diatom-text-primary: #F8FAFC;
  --diatom-text-secondary: #94A3B8;
  --diatom-text-muted: #64748B;
  --diatom-border-hairline: rgba(255, 255, 255, 0.08);
  --diatom-border-medium: rgba(255, 255, 255, 0.14);
  --diatom-border-cyan-glow: rgba(6, 182, 212, 0.4);

  /* ==========================================================================
     2. TYPOGRAPHIC TOKEN MATRIX
     ========================================================================== */
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Optical Fluid Typography Scale */
  --text-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --text-h1: clamp(2rem, 3.5vw + 0.75rem, 3.25rem);
  --text-h2: clamp(1.5rem, 2.4vw + 0.5rem, 2.25rem);
  --text-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-telemetry: 0.8125rem;

  /* Tracking & Line-Height */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-relaxed: 1.6;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.05em;

  /* ==========================================================================
     3. HIGH-CRAFT GPU MOTION & MICRO-INTERACTION TOKENS
     ========================================================================== */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-micro: 140ms;
  --duration-ui: 240ms;
  --duration-modal: 320ms;

  /* Shadows & Ambient Glows */
  --glow-cyan-card: 0 10px 30px -10px rgba(6, 182, 212, 0.25);
  --glow-gold-card: 0 10px 30px -10px rgba(204, 164, 59, 0.25);
  --glow-cobalt-card: 0 10px 30px -10px rgba(5, 64, 137, 0.35);
  --shadow-bento: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Base Utility Classes */
.font-display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

.font-sans {
  font-family: var(--font-sans);
}

.font-mono-telemetry {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* High-Craft Bento Surface */
.bento-card {
  background: linear-gradient(180deg, rgba(18, 26, 40, 0.85) 0%, rgba(13, 20, 36, 0.95) 100%);
  border: 1px solid var(--diatom-border-hairline);
  box-shadow: var(--shadow-bento);
  border-radius: 1rem;
  transition: transform var(--duration-ui) var(--ease-spring), border-color var(--duration-ui) ease, box-shadow var(--duration-ui) ease;
}

.bento-card:hover {
  border-color: var(--diatom-cyan-border);
  box-shadow: var(--glow-cyan-card);
  transform: translateY(-3px);
}

/* Telemetry Ping Pulse */
.telemetry-pulse {
  position: relative;
  display: inline-flex;
  height: 0.5rem;
  width: 0.5rem;
}

.telemetry-pulse-dot {
  position: relative;
  display: inline-flex;
  border-radius: 9999px;
  height: 0.5rem;
  width: 0.5rem;
  background-color: var(--diatom-emerald);
}

.telemetry-pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  background-color: var(--diatom-emerald);
  opacity: 0.75;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bento-card:hover {
    transform: none !important;
  }
}