/* ==========================================================================
   BETATECH — Design Tokens
   Single source of truth for color, type, spacing, radii, shadows, motion.
   Edit values here; never hard-code them in component styles.
   ========================================================================== */

:root {
  /* ----- Brand color ----- */
  --color-navy:        #1F4E79; /* primary — wordmark "BETA", headers, nav */
  --color-navy-dark:   #163A5C; /* hover / gradient stop */
  --color-navy-deep:   #102A43; /* hero + footer backgrounds */
  --color-red:         #D93636; /* accent — "TECH", CTAs, highlights (4.6:1 on white) */
  --color-red-dark:    #B82626; /* CTA hover / small text on white */
  --color-red-soft:    #E05252; /* red on dark backgrounds (better contrast) */

  /* ----- Neutrals ----- */
  --color-white:       #FFFFFF;
  --color-gray-50:     #F5F7FA; /* alternate section background */
  --color-gray-100:    #E9EEF4; /* borders on light */
  --color-gray-300:    #C3CEDA; /* muted borders / dividers */
  --color-gray-500:    #5A6B7E; /* secondary text */
  --color-slate:       #1A2332; /* body text */

  /* ----- Semantic ----- */
  --color-bg:          var(--color-white);
  --color-bg-alt:      var(--color-gray-50);
  --color-text:        var(--color-slate);
  --color-text-muted:  var(--color-gray-500);
  --color-success:     #1E7B4D;
  --color-error:       var(--color-red-dark);
  --color-focus-ring:  #2E7CD6;

  /* ----- Typography ----- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale (min @360px viewport → max @1440px) */
  --text-xs:   0.8125rem;                          /* 13px  */
  --text-sm:   0.875rem;                           /* 14px  */
  --text-base: 1rem;                               /* 16px  */
  --text-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg:   clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.5rem + 1.3vw, 2.375rem);
  --text-3xl:  clamp(2.125rem, 1.7rem + 2.2vw, 3.25rem);
  --text-4xl:  clamp(2.625rem, 2rem + 3.2vw, 4.25rem);  /* hero display */

  --tracking-display: -0.025em;  /* 2xl and up */
  --tracking-caps:     0.1em;    /* uppercase eyebrows / labels */

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.65;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ----- Spacing scale (4px base) ----- */
  --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;
  --section-pad: clamp(3.5rem, 3rem + 4vw, 6.5rem);

  /* ----- Layout ----- */
  --container-max: 72rem;       /* 1152px */
  --container-pad: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-height: 4.5rem;

  /* ----- Radii ----- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 999px;

  /* ----- Elevation ----- */
  --shadow-sm: 0 1px 2px rgba(16, 42, 67, 0.08);
  --shadow-md: 0 4px 16px rgba(16, 42, 67, 0.10);
  --shadow-lg: 0 12px 32px rgba(16, 42, 67, 0.16);

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 550ms;
}