/* ==========================================================================
   NEXORYA — Brand Tokens
   Design system tokens for the NEXORYA agency website.
   Open Props loaded via CDN in index.html.
   ========================================================================== */

:root {
  /* ── Brand Colors ── */
  --nx-primary: #6366f1;
  --nx-primary-light: #818cf8;
  --nx-primary-dark: #4f46e5;
  --nx-accent: #8b5cf6;
  --nx-accent-light: #a78bfa;

  /* ── Gradients ── */
  --nx-gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
  --nx-gradient-hero: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4338ca 100%);
  --nx-gradient-text: linear-gradient(135deg, #818cf8, #c084fc);
  --nx-gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 70%);

  /* ── Backgrounds ── */
  --nx-bg: #0a0a0f;
  --nx-bg-elevated: #141420;
  --nx-bg-card: #1a1a2e;
  --nx-bg-card-hover: #22223a;
  --nx-bg-story: #121212;
  --nx-bg-input: #1e1e30;

  /* ── Text ── */
  --nx-text: #fafafa;
  --nx-text-muted: #a1a1aa;
  --nx-text-dim: #71717a;

  /* ── Borders ── */
  --nx-border: rgba(255, 255, 255, 0.08);
  --nx-border-hover: rgba(255, 255, 255, 0.15);

  /* ── Service Card Accents ── */
  --nx-service-blue: #6366f1;
  --nx-service-pink: #ec4899;
  --nx-service-yellow: #f59e0b;
  --nx-service-cyan: #06b6d4;
  --nx-service-purple: #8b5cf6;
  --nx-service-green: #10b981;

  /* ── Typography — Utopia Fluid Scale ── */
  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25 */
  --nx-step--2: clamp(0.6944rem, 0.6546rem + 0.1988vw, 0.8rem);
  --nx-step--1: clamp(0.8333rem, 0.7706rem + 0.3137vw, 1rem);
  --nx-step-0: clamp(1rem, 0.9048rem + 0.4762vw, 1.25rem);
  --nx-step-1: clamp(1.2rem, 1.0598rem + 0.7012vw, 1.5625rem);
  --nx-step-2: clamp(1.44rem, 1.2384rem + 1.0082vw, 1.9531rem);
  --nx-step-3: clamp(1.728rem, 1.4446rem + 1.4168vw, 2.4414rem);
  --nx-step-4: clamp(2.0736rem, 1.6825rem + 1.9558vw, 3.0518rem);
  --nx-step-5: clamp(2.4883rem, 1.9568rem + 2.6577vw, 3.8147rem);
  --nx-step-6: clamp(2.986rem, 2.2726rem + 3.5669vw, 4.7684rem);

  /* ── Font Families ── */
  --nx-font-heading: 'Space Grotesk', system-ui, sans-serif;
  --nx-font-body: 'DM Sans', system-ui, sans-serif;

  /* ── Spacing — Utopia Fluid Scale ── */
  /* @link https://utopia.fyi/space/calculator */
  --nx-space-3xs: clamp(0.25rem, 0.2262rem + 0.119vw, 0.3125rem);
  --nx-space-2xs: clamp(0.5rem, 0.4524rem + 0.2381vw, 0.625rem);
  --nx-space-xs: clamp(0.75rem, 0.6786rem + 0.3571vw, 0.9375rem);
  --nx-space-s: clamp(1rem, 0.9048rem + 0.4762vw, 1.25rem);
  --nx-space-m: clamp(1.5rem, 1.3571rem + 0.7143vw, 1.875rem);
  --nx-space-l: clamp(2rem, 1.8095rem + 0.9524vw, 2.5rem);
  --nx-space-xl: clamp(3rem, 2.7143rem + 1.4286vw, 3.75rem);
  --nx-space-2xl: clamp(4rem, 3.619rem + 1.9048vw, 5rem);
  --nx-space-3xl: clamp(6rem, 5.4286rem + 2.8571vw, 7.5rem);

  /* ── Layout ── */
  --nx-max-width: 75rem;
  --nx-gutter: var(--nx-space-m);
  --nx-radius-sm: 0.5rem;
  --nx-radius-md: 0.75rem;
  --nx-radius-lg: 1rem;
  --nx-radius-xl: 1.5rem;
  --nx-radius-full: 9999px;

  /* ── Transitions ── */
  --nx-transition-fast: 150ms;
  --nx-transition-base: 250ms;
  --nx-transition-slow: 400ms;

  /* ── Z-Index ── */
  --nx-z-base: 1;
  --nx-z-dropdown: 100;
  --nx-z-sticky: 200;
  --nx-z-overlay: 500;
  --nx-z-modal: 1000;
}