/* ============================================================
   PRIME DATACENTER — Design Tokens
   Industrial Luxury · Enterprise Trust · Data-Native
   ============================================================ */

:root {
  /* ---- Color System (OKLCH, P3-ready) ---- */
  --pd-bg-base: oklch(8% 0.008 250);
  --pd-bg-elevated: oklch(11% 0.01 250);
  --pd-bg-card: oklch(14% 0.012 250);
  --pd-bg-overlay: oklch(7% 0.008 250 / 0.85);

  --pd-border-subtle: oklch(22% 0.015 250);
  --pd-border-strong: oklch(35% 0.02 250);
  --pd-border-accent: oklch(75% 0.18 85 / 0.4);

  --pd-text-primary: oklch(97% 0.005 250);
  --pd-text-secondary: oklch(78% 0.01 250);
  --pd-text-muted: oklch(58% 0.012 250);
  --pd-text-faint: oklch(42% 0.01 250);

  /* Brand — Amber Gold (industrial precision) */
  --pd-brand: oklch(78% 0.16 82);
  --pd-brand-bright: oklch(85% 0.18 85);
  --pd-brand-dim: oklch(65% 0.14 80);

  /* Accent — Electric Cyan (data signal) */
  --pd-accent: oklch(75% 0.15 205);
  --pd-accent-bright: oklch(82% 0.17 205);

  /* Status */
  --pd-success: oklch(72% 0.18 145);
  --pd-warning: oklch(78% 0.18 75);
  --pd-danger: oklch(68% 0.22 25);

  /* ---- Typography Scale (fluid) ---- */
  --pd-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --pd-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --pd-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --pd-text-xs: clamp(0.72rem, 0.69rem + 0.1vw, 0.78rem);
  --pd-text-sm: clamp(0.82rem, 0.78rem + 0.15vw, 0.9rem);
  --pd-text-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --pd-text-lg: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --pd-text-xl: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem);
  --pd-text-2xl: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
  --pd-text-3xl: clamp(2.2rem, 1.7rem + 2vw, 3rem);
  --pd-display-md: clamp(2.8rem, 2rem + 3.5vw, 4.5rem);
  --pd-display-lg: clamp(3.5rem, 2.2rem + 5.5vw, 6.5rem);
  --pd-display-xl: clamp(4.2rem, 2.5rem + 7vw, 8rem);

  /* ---- Spatial ---- */
  --pd-space-1: 0.25rem;
  --pd-space-2: 0.5rem;
  --pd-space-3: 0.75rem;
  --pd-space-4: 1rem;
  --pd-space-5: 1.5rem;
  --pd-space-6: 2rem;
  --pd-space-8: 3rem;
  --pd-space-10: 4rem;
  --pd-space-12: 6rem;
  --pd-space-16: 8rem;
  --pd-section: clamp(4rem, 3rem + 5vw, 10rem);

  --pd-radius-sm: 4px;
  --pd-radius-md: 8px;
  --pd-radius-lg: 14px;
  --pd-radius-xl: 24px;
  --pd-radius-pill: 999px;

  /* ---- Motion ---- */
  --pd-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --pd-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --pd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pd-dur-fast: 180ms;
  --pd-dur-base: 320ms;
  --pd-dur-slow: 580ms;
  --pd-dur-cinematic: 900ms;

  /* ---- Effects ---- */
  --pd-shadow-glow: 0 0 0 1px oklch(75% 0.18 85 / 0.15),
    0 8px 24px oklch(75% 0.18 85 / 0.08),
    0 24px 64px oklch(0% 0 0 / 0.4);
  --pd-shadow-card: 0 1px 0 oklch(100% 0 0 / 0.04) inset,
    0 0 0 1px oklch(22% 0.015 250),
    0 12px 32px oklch(0% 0 0 / 0.25);
  --pd-shadow-lift: 0 1px 0 oklch(100% 0 0 / 0.06) inset,
    0 0 0 1px oklch(35% 0.02 250),
    0 24px 64px oklch(0% 0 0 / 0.5);

  /* ---- Layout ---- */
  --pd-max-w: 1320px;
  --pd-max-w-narrow: 880px;
  --pd-grid-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}