/* ==========================================================================
   HLTS DESIGN TOKENS
   Every colour on the site comes from the HLTS logo:
     night navy background · infinity indigo · violet · magenta · lavender · white
   Neutrals are tinted from the logo's night navy, so greys sit in the same family.
   Load first. Never hard-code a colour elsewhere; use these variables.
   ========================================================================== */

:root {
  /* ---- Logo colours ---------------------------------------------------- */
  --night-950: #0a0820;
  --night-900: #110e2b;   /* logo background */
  --night-800: #1a1640;
  --night-700: #262058;
  --night-600: #3a3380;

  --indigo-800: #2414a8;
  --indigo-700: #2b1bd0;
  --indigo-600: #3322e8;
  --indigo-500: #3d2bff;  /* infinity, blue end */
  --indigo-400: #6c5eff;
  --indigo-300: #a29aff;
  --indigo-200: #cbc6ff;
  --indigo-100: #e8e5ff;
  --indigo-50:  #f4f2ff;

  --violet-600: #7329e3;
  --violet-500: #8a3bff;  /* infinity, middle */
  --violet-400: #a56cff;
  --violet-100: #efe4ff;

  --magenta-700: #a3138f;
  --magenta-600: #c41ec0;
  --magenta-500: #e531f0; /* infinity, pink end */
  --magenta-400: #f06cf5;
  --magenta-100: #fde6fc;

  --lavender-300: #c9a2ff; /* "TECHNOLOGY" lettering */
  --lavender-200: #ddc6ff;
  --lavender-100: #f3ebff;

  --white: #ffffff;

  /* ---- Neutrals, tinted from night navy --------------------------------- */
  --ink: #16122f;          /* headings */
  --body: #3b3658;         /* paragraphs */
  --muted: #625d80;        /* secondary text, AA on light surfaces */
  --line: #e7e3f3;
  --line-strong: #d3cceb;
  --surface: var(--white);
  --surface-2: #f7f5fd;
  --surface-3: #eeebfa;
  --page: #fcfbff;
  --placeholder: #8f89ad;

  /* On dark (night) surfaces */
  --on-dark: #f5f2ff;
  --on-dark-muted: #bab3dc;
  --line-dark: rgba(201, 162, 255, 0.16);
  --glass-dark: rgba(17, 14, 43, 0.72);

  /* States, kept inside the logo family: errors lean on magenta, success on indigo */
  --danger: #cf2463;
  --danger-soft: #fde8f0;
  --success: var(--indigo-600);
  --success-soft: var(--indigo-50);

  /* ---- Gradients ------------------------------------------------------- */
  --grad-brand: linear-gradient(115deg, var(--indigo-500) 0%, var(--violet-500) 52%, var(--magenta-500) 100%);
  --grad-brand-soft: linear-gradient(115deg, var(--indigo-50) 0%, var(--lavender-100) 55%, var(--magenta-100) 100%);
  --grad-night: radial-gradient(120% 90% at 85% 0%, rgba(138, 59, 255, 0.35) 0%, transparent 55%),
                radial-gradient(90% 80% at 0% 100%, rgba(61, 43, 255, 0.35) 0%, transparent 60%),
                var(--night-900);
  --grad-text: linear-gradient(100deg, var(--indigo-400), var(--violet-400) 45%, var(--magenta-400));
  --grad-text-light: linear-gradient(100deg, var(--indigo-600), var(--violet-600) 50%, var(--magenta-600));

  /* ---- Type ------------------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-h2: clamp(1.85rem, 1.35rem + 2vw, 2.85rem);
  --fs-h1: clamp(2.35rem, 1.6rem + 3.4vw, 4.2rem);
  --fs-display: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);

  /* ---- Shape & depth ---------------------------------------------------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(17, 14, 43, 0.06);
  --shadow-sm: 0 1px 2px rgba(17, 14, 43, 0.05), 0 6px 18px rgba(17, 14, 43, 0.06);
  --shadow-md: 0 2px 4px rgba(17, 14, 43, 0.05), 0 16px 36px rgba(17, 14, 43, 0.09);
  --shadow-lg: 0 4px 8px rgba(17, 14, 43, 0.06), 0 30px 60px rgba(17, 14, 43, 0.14);
  --glow-indigo: 0 10px 30px rgba(61, 43, 255, 0.32);
  --glow-magenta: 0 10px 30px rgba(229, 49, 240, 0.28);
  --ring: 0 0 0 3px var(--white), 0 0 0 6px var(--indigo-500);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 520ms;
  --dur-4: 800ms;
  --stagger: 70ms;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(64px, 6vw + 32px, 120px);
  --nav-h: 72px;

  /* ---- Bootstrap hooks so its components follow the palette ------------- */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--body);
  --bs-body-bg: var(--page);
  --bs-primary: var(--indigo-500);
  --bs-primary-rgb: 61, 43, 255;
  --bs-link-color: var(--indigo-600);
  --bs-link-color-rgb: 51, 34, 232;
  --bs-link-hover-color: var(--violet-600);
  --bs-border-color: var(--line);
  --bs-secondary-color: var(--muted);
  --bs-emphasis-color: var(--ink);
  --bs-heading-color: var(--ink);
  --bs-focus-ring-color: rgba(61, 43, 255, 0.35);
}