/* ============================================================
   Phantom Lab — DESIGN TOKENS
   ------------------------------------------------------------
   CHANGE COLORS / SPACING / RADII / SHADOWS HERE.
   Every other stylesheet consumes these variables and should
   not hard-code colour or spacing values.

   :root            → dark theme (default)
   [data-theme=…]   → light theme overrides (only what differs)
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --accent-1: #7C3AED;   /* violet */
  --accent-2: #4F7CFF;   /* blue   */
  --accent-3: #22D3EE;   /* cyan   */

  /* ---- Surfaces & text (dark) ---- */
  --bg: #0A0E1A;
  --bg-soft: #0E1424;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-strong: rgba(255, 255, 255, 0.07);
  --card-bg: rgba(255, 255, 255, 0.055);
  --card-bg-2: rgba(255, 255, 255, 0.022);
  --border: rgba(255, 255, 255, 0.09);
  --border-soft: rgba(255, 255, 255, 0.05);
  --text: #E8ECF4;
  --text-muted: #8A93A6;
  --header-bg: rgba(10, 14, 26, 0.7);

  /* ---- Decorative background layer ---- */
  --grid-dot: rgba(255, 255, 255, 0.075);
  --grid-opacity: 0.55;
  --blob-1: rgba(124, 58, 237, 0.16);
  --blob-2: rgba(34, 211, 238, 0.13);
  --zone-1: rgba(124, 58, 237, 0.10);
  --zone-2: rgba(34, 211, 238, 0.08);
  --zone-3: rgba(79, 124, 255, 0.09);

  /* ---- Gradients ---- */
  --grad: linear-gradient(100deg, var(--accent-1), var(--accent-2), var(--accent-3));
  --grad-v: linear-gradient(180deg, var(--accent-1), var(--accent-2), var(--accent-3));
  --grad-border: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.09));
  --sheen: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);

  /* ---- Shadows & glows ---- */
  --glow: 0 0 40px rgba(124, 58, 237, 0.35);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-card: none;
  --focus-ring: 0 0 0 3px rgba(79, 124, 255, 0.18);

  /* ---- Radii ---- */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 96px;

  /* ---- Layout ---- */
  --section-pad-y: 110px;
  --section-head-gap: var(--space-7);
  --container-w: 1180px;
  --container-gutter: 48px;

  /* ---- Per-card accents (services bento, violet → cyan) ---- */
  --c1: #7C3AED;  --c1-soft: rgba(124, 58, 237, 0.35);
  --c2: #6D4AF2;  --c2-soft: rgba(109, 74, 242, 0.35);
  --c3: #5E63F7;  --c3-soft: rgba(94, 99, 247, 0.35);
  --c4: #4F7CFF;  --c4-soft: rgba(79, 124, 255, 0.35);
  --c5: #3E9CF6;  --c5-soft: rgba(62, 156, 246, 0.35);
  --c6: #2FB8E9;  --c6-soft: rgba(47, 184, 233, 0.35);
  --c7: #22D3EE;  --c7-soft: rgba(34, 211, 238, 0.35);
}

/* ============ Light theme ============ */
[data-theme="light"] {
  --bg: #F6F8FC;
  --bg-soft: #EDF1F8;
  --surface: rgba(255, 255, 255, 0.75);
  --surface-strong: #FFFFFF;
  --card-bg: rgba(255, 255, 255, 0.86);
  --card-bg-2: rgba(255, 255, 255, 0.62);
  --border: rgba(15, 23, 42, 0.10);
  --border-soft: rgba(15, 23, 42, 0.06);
  --text: #101828;
  --text-muted: #5A6478;
  --header-bg: rgba(246, 248, 252, 0.75);

  --grid-dot: rgba(30, 41, 80, 0.09);
  --grid-opacity: 0.5;
  --blob-1: rgba(124, 58, 237, 0.10);
  --blob-2: rgba(34, 211, 238, 0.10);
  --zone-1: rgba(124, 58, 237, 0.06);
  --zone-2: rgba(34, 211, 238, 0.06);
  --zone-3: rgba(79, 124, 255, 0.06);

  --grad-border: linear-gradient(160deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.03) 45%, rgba(15, 23, 42, 0.08));
  --glow: 0 0 40px rgba(124, 58, 237, 0.18);
  --shadow: 0 20px 50px rgba(30, 41, 80, 0.12);
  --shadow-card: 0 6px 24px rgba(30, 41, 80, 0.06);
}