/* ==========================================================================
   Design tokens — PixyDev IT Solutions OPC
   Single source of truth for color, type, spacing, radius, shadow, motion.
   ========================================================================== */

:root {
  /* Color — surfaces */
  --color-bg: #080f1d;            /* deep navy */
  --color-bg-alt: #111c2e;        /* midnight blue */
  --color-surface: rgba(17, 28, 46, 0.62);
  --color-surface-strong: rgba(17, 28, 46, 0.88);
  --color-surface-hover: rgba(24, 38, 62, 0.78);

  /* Color — accents */
  --color-accent: #00d4ff;        /* electric cyan */
  --color-accent-2: #3b82f6;      /* technology blue */
  --color-accent-soft: rgba(0, 212, 255, 0.12);
  --color-accent-glow: rgba(0, 212, 255, 0.28);
  --gradient-accent: linear-gradient(135deg, #00d4ff 0%, #3b82f6 100%);
  --gradient-text: linear-gradient(120deg, #f8fafc 0%, #b9f2ff 45%, #00d4ff 100%);

  /* Color — text */
  --color-text: #f8fafc;          /* near white */
  --color-text-muted: #94a3b8;    /* muted slate */
  --color-text-subtle: #64748b;
  --color-on-accent: #04111f;

  /* Color — lines */
  --color-border: rgba(148, 163, 184, 0.14);
  --color-border-strong: rgba(148, 163, 184, 0.26);
  --color-border-accent: rgba(0, 212, 255, 0.38);

  /* Status */
  --color-warning: #fbbf24;
  --color-warning-soft: rgba(251, 191, 36, 0.12);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.65;

  /* Spacing (4px scale) */
  --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;
  --section-y: clamp(4rem, 2.75rem + 4.5vw, 6.5rem);
  --gutter: 1rem;

  /* Layout */
  --container: 72rem;
  --container-narrow: 46rem;
  --header-h: 4.25rem;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px var(--color-border-accent), 0 12px 40px -12px var(--color-accent-glow);
  --blur-glass: saturate(140%) blur(14px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 700ms;
}

@media (min-width: 40em) {
  :root { --gutter: 1.5rem; }
}

@media (min-width: 64em) {
  :root { --gutter: 2rem; --header-h: 4.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}