/* ============================================================
   BORG 360 — Design Tokens (single source of truth)
   Everything theming flows through these custom properties.
   The Studio editor and every template override these names,
   so one change cascades across the whole site automatically.
   ============================================================ */

:root {
  /* ---- Brand gradient stops (from the logo) ---- */
  --brand-1: #2E7DF6;   /* electric blue   */
  --brand-2: #7B3FE4;   /* violet          */
  --brand-3: #E0359E;   /* magenta         */
  --brand-4: #F24BB5;   /* hot pink        */
  --accent:  #FF6B4A;   /* coral ember (waves / cursor) */

  /* ---- Ink / surface scale (deep space navy) ---- */
  --ink:     #070A1E;   /* page background, deepest */
  --ink-1:   #0A0E27;   /* base surface             */
  --ink-2:   #0E1330;   /* raised panel             */
  --ink-3:   #141A3C;   /* card                     */
  --ink-4:   #1B2350;   /* hover / elevated         */
  --hairline: rgba(255,255,255,.08);
  --hairline-strong: rgba(255,255,255,.16);

  /* ---- Text ---- */
  --text:        #EAF0FF;        /* near-white, blue tint */
  --text-dim:    #A9B3DA;        /* secondary             */
  --text-faint:  #6B76A8;        /* tertiary / captions   */
  --text-on-brand: #0A0E27;      /* text on bright gradient fills */

  /* ---- Signature gradients ---- */
  --grad-brand: linear-gradient(120deg, var(--brand-1) 0%, var(--brand-2) 42%, var(--brand-3) 78%, var(--brand-4) 100%);
  --grad-brand-rev: linear-gradient(300deg, var(--brand-1) 0%, var(--brand-2) 42%, var(--brand-3) 78%, var(--brand-4) 100%);
  --grad-soft: linear-gradient(120deg, rgba(46,125,246,.16), rgba(224,53,158,.16));
  --grad-orbit: conic-gradient(from 200deg at 50% 50%, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-4), var(--brand-1));
  --grad-text: linear-gradient(100deg, #6FB0FF 0%, #A77BFF 38%, var(--brand-3) 70%, var(--brand-4) 100%);
  --grad-veil: linear-gradient(to bottom, rgba(7,10,30,0) 0%, rgba(7,10,30,.55) 55%, var(--ink) 100%);

  /* ---- Glass / glow surfaces ---- */
  --glass-bg: rgba(20,26,60,.55);
  --glass-border: rgba(255,255,255,.10);
  --glass-blur: 16px;

  /* ---- Typography ---- */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* Fluid type scale (clamp: min, vw, max) */
  --fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm:   clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --fs-base: clamp(0.98rem, 0.94rem + 0.22vw, 1.08rem);
  --fs-md:   clamp(1.12rem, 1.05rem + 0.35vw, 1.30rem);
  --fs-lg:   clamp(1.35rem, 1.20rem + 0.70vw, 1.75rem);
  --fs-xl:   clamp(1.70rem, 1.40rem + 1.40vw, 2.60rem);
  --fs-2xl:  clamp(2.20rem, 1.70rem + 2.40vw, 3.60rem);
  --fs-3xl:  clamp(2.80rem, 2.00rem + 3.80vw, 5.20rem);
  --fs-4xl:  clamp(3.40rem, 2.20rem + 5.60vw, 7.00rem);

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.62;
  --tracking-tight: -0.022em;
  --tracking-wide: 0.14em;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;    --space-11: 11rem;
  --section-y: clamp(4rem, 3rem + 6vw, 9rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1380px;
  --container-narrow: 760px;
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.4rem);

  /* ---- Radii ---- */
  --radius-xs: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ---- Shadows + glows ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --shadow: 0 18px 50px -18px rgba(0,0,0,.65);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.75);
  --glow-blue: 0 0 0 1px rgba(46,125,246,.35), 0 16px 50px -12px rgba(46,125,246,.55);
  --glow-pink: 0 0 0 1px rgba(224,53,158,.35), 0 16px 50px -12px rgba(224,53,158,.50);
  --glow-brand: 0 18px 60px -16px rgba(123,63,228,.65);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-1: .18s;
  --dur-2: .32s;
  --dur-3: .6s;
  --dur-4: 1s;

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 100;
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-toast: 3000;

  color-scheme: dark;
}

/* Reduced-motion users get instant, calm transitions */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: .001s; --dur-2: .001s; --dur-3: .001s; --dur-4: .001s;
  }
}