/* ==========================================================
   SCI MEDIA — DESIGN TOKENS
   Single source of truth for brand values used across every
   section of the site. New sections should only ever reach
   for variables defined here — never hardcode a hex value,
   spacing number, or breakpoint in a component file.
   ========================================================== */

:root {

  /* -----------------------------------------------------
     COLOR — Brand
     60% navy / 30% white / 10% blue+orange accent (guideline,
     not a per-section formula — see components.css for use).
     ----------------------------------------------------- */
  --color-navy-900: #0A1730; /* deepest navy — hero/footer bg */
  --color-navy-800: #0F2147; /* nav bg, dark section bg */
  --color-navy-700: #17305F; /* elevated surface on navy (cards, panels) */
  --color-navy-600: #24437E; /* borders / dividers on navy */

  --color-blue-700: #1E458F; /* darkest blue step, used in the Trust gradient */
  --color-blue-600: #2557C2; /* darker blue step, used in the Trust gradient */
  --color-blue-500: #2E6BE0; /* bright blue — links, icons, secondary CTA */
  --color-blue-400: #5A8CF0; /* blue on dark backgrounds (hover/active) */
  --color-blue-300: #92B3F2; /* lighter blue step, used in the Trust gradient */
  --color-blue-100: #E8EFFC; /* pale blue tint for light-section backgrounds */

  --color-orange-500: #F2790C; /* primary CTA / accent */
  --color-orange-600: #D9660A; /* hover / pressed state */
  --color-orange-400: #F59A3D; /* lighter orange step, used in the Trust stat numbers */
  --color-orange-100: #FDECD8; /* pale orange tint, small highlights only */

  --color-white: #FFFFFF;

  /* -----------------------------------------------------
     COLOR — Ink (text) & neutral surfaces
     ----------------------------------------------------- */
  --color-ink-900: #101826; /* body text on white */
  --color-ink-600: #4B5568; /* secondary text on white */
  --color-ink-400: #8793A6; /* muted / placeholder text */
  --color-border: #E2E6ED; /* hairline borders on white */
  --color-surface: #F6F8FC; /* soft off-white section background */

  /* Text-on-navy variants */
  --color-on-navy-primary: #FFFFFF;
  --color-on-navy-secondary: #B7C3DA;
  --color-on-navy-muted: #7E8CAC;

  /* -----------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------- */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Caveat', cursive; /* one-off decorative flourish only (About, Trust taglines) — never body/heading text */

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-h1: clamp(2.25rem, 1.55rem + 2vw, 3.1rem);
  --fs-h2: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

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

  /* -----------------------------------------------------
     SPACING — base unit 4px (0.25rem)
     ----------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

   /* -----------------------------------------------------
     RADIUS
     ----------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 999px;

  /* -----------------------------------------------------
     SHADOW — navy-tinted, not flat black, for a premium feel
     ----------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(10, 23, 48, 0.06), 0 1px 1px rgba(10, 23, 48, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(10, 23, 48, 0.18);
  --shadow-lg: 0 24px 48px -16px rgba(10, 23, 48, 0.3);
  --shadow-glow-blue: 0 0 80px rgba(46, 107, 224, 0.22);

  /* -----------------------------------------------------
     MOTION
     ----------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* -----------------------------------------------------
     LAYOUT
     ----------------------------------------------------- */
  --container-max: 1280px;
  --container-narrow: 1120px;
  --container-pad: 1.5rem; /* overridden down at small breakpoints */

  /* -----------------------------------------------------
     Z-INDEX
     ----------------------------------------------------- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* -----------------------------------------------------------
   BREAKPOINT REFERENCE (documentation only — CSS custom
   properties cannot be used inside @media queries, so these
   exact px values are the ones hardcoded in responsive.css):

   Desktop:  1440px / 1280px
   Tablet:   1024px / 768px
   Mobile:   480px / 390px / 360px
   ----------------------------------------------------------- */