/* ==========================================================================
   First Brick — Design tokens
   Translated directly from the approved Figma variables (FB Color / FB Spacing
   / FB Radius) and text styles. Change a value here to update it site-wide.
   ========================================================================== */

:root {
  /* --- Brand colours --------------------------------------------------- */
  --color-foundation-blue: #2B4C7E;
  --color-slate-blue:      #4E7CA8;
  --color-signal-amber:    #F2A65A;
  --color-cloud:           #F4F6F9;
  --color-ink-navy:        #17233A;
  --color-white:           #FFFFFF;

  /* Neutrals */
  --color-text-secondary:  #586074;
  --color-border:          #E4E9F0;
  --color-border-strong:   #CED6E2;
  --color-amber-soft:      #FDEBD3;
  --color-blue-soft:       #E9F0F8;

  /* Feedback (semantic) */
  --color-error:           #B3261E;
  --color-error-border:    #CF4436;
  --color-error-bg:        #FCEBEA;
  --color-success:         #1E7A52;
  --color-success-bg:      #E6F4EC;

  /* --- Semantic aliases ------------------------------------------------ */
  --color-text-primary:    var(--color-ink-navy);
  --color-bg-primary:      var(--color-white);
  --color-bg-muted:        var(--color-cloud);
  --color-bg-deep:         var(--color-foundation-blue);
  --color-accent:          var(--color-signal-amber);
  --color-link:            var(--color-foundation-blue);
  --color-link-hover:      #1f3a63;

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

  /* Fluid type scale (mobile → desktop) matching Figma sizes */
  --fs-display:    clamp(2.5rem, 1.6rem + 3.6vw, 4rem);      /* 40 → 64 */
  --fs-h1:         clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); /* 34 → 52 */
  --fs-h2:         clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);   /* 28 → 40 */
  --fs-h3:         clamp(1.4375rem, 1.2rem + 1.1vw, 1.875rem); /* 23 → 30 */
  --fs-h4:         clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem); /* 20 → 22 */
  --fs-body-lg:    clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17 → 18 */
  --fs-body:       1rem;        /* 16 */
  --fs-body-sm:    0.875rem;    /* 14 */
  --fs-eyebrow:    0.8125rem;   /* 13 */
  --fs-label:      0.875rem;    /* 14 */
  --fs-button:     1rem;        /* 16 */
  --fs-nav:        0.9375rem;   /* 15 */

  --lh-tight:      1.1;
  --lh-heading:    1.18;
  --lh-snug:       1.35;
  --lh-body:       1.6;

  --ls-heading:    -0.01em;
  --ls-eyebrow:    0.09em;

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

  /* --- Spacing scale (FB Spacing) ------------------------------------- */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-20:  1.25rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-40:  2.5rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-80:  5rem;
  --space-96:  6rem;
  --space-120: 7.5rem;

  /* Vertical rhythm between major sections (fluid) */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Radius (FB Radius) --------------------------------------------- */
  --radius-sm:     8px;
  --radius-button: 10px;
  --radius-card:   16px;
  --radius-lg:     24px;
  --radius-pill:   999px;

  /* --- Shadows -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(23, 35, 58, 0.06), 0 1px 3px rgba(23, 35, 58, 0.05);
  --shadow-md: 0 6px 20px rgba(23, 35, 58, 0.08);
  --shadow-lg: 0 18px 48px rgba(23, 35, 58, 0.14);

  /* --- Layout --------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: clamp(1.375rem, 1rem + 3vw, 3rem); /* 22px → 48px */
  --header-height: 72px;

  /* --- Motion --------------------------------------------------------- */
  --transition-fast: 140ms ease;
  --transition:      200ms ease;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
}