/* ==========================================================================
   ByteCapital — Design Tokens
   Single source of truth for colour, type, spacing, radii, shadows, motion.
   ========================================================================== */

:root {
  /* ---- Brand colours ---------------------------------------------------- */
  --color-primary: #0B2A4A;      /* deep navy "ink" — dominant authority colour */
  --color-primary-700: #123A63;  /* hover / elevated navy */
  --color-primary-300: #4E6A8A;  /* muted navy for subtle UI */

  --color-accent: #1FA2FF;       /* electric blue — "Byte" tech signal */
  --color-accent-600: #0E84E0;   /* accent hover / active (white text ≈ 4.6:1) */
  --color-accent-100: #E3F2FF;   /* faint accent wash for chips / icon tiles */

  --color-gold: #E6B450;         /* warm "Capital" gold — sparing highlights */
  --color-gold-600: #C9962E;

  /* ---- Neutrals --------------------------------------------------------- */
  --color-ink: #0E1726;          /* body text on light (≈17:1 on white) */
  --color-slate: #5B6B7F;        /* secondary text, captions */
  --color-slate-300: #94A3B5;    /* tertiary text */
  --color-line: #E2E8F0;         /* borders / dividers */
  --color-line-strong: #CBD5E1;

  --color-bg: #FFFFFF;           /* page background */
  --color-bg-alt: #F5F8FC;       /* alternating section background */
  --color-bg-dark: #081E36;      /* dark sections / footer (deeper than primary) */
  --color-bg-dark-2: #0B2A4A;    /* dark surface variant */
  --color-on-dark: #E8F1FA;      /* text on dark surfaces (≈13:1) */
  --color-on-dark-muted: #9DB6CE;/* muted text on dark */

  --color-success: #16A34A;

  /* ---- Gradients -------------------------------------------------------- */
  --grad-hero: radial-gradient(1200px 600px at 75% -10%, #14457A 0%, transparent 60%),
               radial-gradient(900px 500px at 0% 110%, #0E84E0 0%, transparent 55%),
               linear-gradient(160deg, #081E36 0%, #0B2A4A 55%, #0A2950 100%);
  --grad-accent: linear-gradient(135deg, #1FA2FF 0%, #0E84E0 100%);
  --grad-gold: linear-gradient(135deg, #F1C96B 0%, #E6B450 100%);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.5rem, 5vw, 4rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.2rem;
  --fs-body: 1.0625rem;          /* 17px */
  --fs-lead: clamp(1.125rem, 1.6vw, 1.3rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-body: 1.65;
  --lh-heading: 1.12;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing scale (8pt-ish) ----------------------------------------- */
  --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;

  /* fluid vertical section padding */
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 72px;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(11, 42, 74, 0.06);
  --shadow-sm: 0 4px 14px rgba(11, 42, 74, 0.07);
  --shadow-md: 0 12px 30px rgba(11, 42, 74, 0.10);
  --shadow-lg: 0 24px 60px rgba(8, 30, 54, 0.16);
  --shadow-accent: 0 14px 30px rgba(14, 132, 224, 0.30);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t: 0.28s;
  --t-slow: 0.5s;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-header: 1000;
  --z-menu: 1100;
  --z-skip: 1200;
}