/* ============================================================
   Contactable — Design System tokens (consolidated)
   Source: Contactable Design System 2026 (fonts, colors,
   typography, spacing, base) from the design handoff bundle.
   ============================================================ */

/* ---- Webfonts ---- */
@font-face {
  font-family: "Google Sans Flex";
  src: url("../assets/fonts/GoogleSansFlex.woff2") format("woff2"),
       url("../assets/fonts/GoogleSansFlex.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("../assets/fonts/ArchivoBlack-Regular.woff2") format("woff2"),
       url("../assets/fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Primary palette ---- */
  --deep-blue:        #0F1E6D;
  --white:            #FFFFFF;
  --soft-grey:        #F2F2F2;
  --periwinkle:       #6962F0;
  --deep-orange:      #F54C2C;
  --bright-orange:    #FDA104;
  --secondary-purple: #7E3AED;

  /* ---- Tints ---- */
  --deep-blue-75:  #4B5690;
  --deep-blue-50:  #878FB6;
  --periwinkle-75: #8781F4;
  --periwinkle-50: #B4B0F7;

  /* ---- Grey steps ---- */
  --grey-100: #F2F2F2;
  --grey-200: #E4E4E8;
  --grey-300: #CBCBD4;
  --grey-500: #8A8A99;
  --grey-700: #4A4A57;
  --grey-900: #1A1A24;

  /* ---- Gradients ---- */
  --gradient-primary:   linear-gradient(120deg, #0F1E6D 0%, #F54C2C 60%, #6962F0 100%);
  --gradient-secondary: linear-gradient(90deg, #F54C2C 0%, #FDA104 100%);
  --gradient-tertiary:  linear-gradient(90deg, #6962F0 0%, #7E3AED 100%);
  --gradient-wordmark:  linear-gradient(95deg, #F54C2C 0%, #0F1E6D 48%, #6962F0 100%);

  /* ---- Semantic ---- */
  --surface-page:        var(--white);
  --surface-alt:         var(--soft-grey);
  --text-primary:        var(--deep-blue);
  --text-secondary:      var(--deep-blue-75);
  --text-muted:          var(--deep-blue-50);
  --text-accent:         var(--deep-orange);
  --text-link:           var(--deep-blue);

  --border-subtle:   var(--grey-200);
  --border-default:  var(--grey-300);
  --border-strong:   var(--deep-blue);

  --cta-bg-hover:    #F08F00;
  --focus-ring: 0 0 0 3px rgba(105, 98, 240, 0.45);

  /* ---- Families ---- */
  --font-impact: "Archivo Black", "Arial Black", sans-serif;
  --font-brand:  "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:   var(--font-brand);

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

  /* ---- Type scale ---- */
  --text-body:    16px;
  --leading-body: 1.6;
  --leading-heading: 1.2;

  /* ---- Radii ---- */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 2px rgba(15, 30, 109, 0.06);
  --shadow-sm:  0 2px 8px rgba(15, 30, 109, 0.06);
  --shadow-md:  0 8px 24px rgba(15, 30, 109, 0.08);
  --shadow-lg:  0 20px 48px rgba(15, 30, 109, 0.12);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: 64px;

  /* ---- Fluid foundation (clamp-based; min / preferred / max) ----
     Use these instead of hardcoded px so layouts flex between widths.
     --wrap-pad is the single gutter knob: raise/lower the last value to
     widen/narrow the side gutters on large screens. */
  --wrap-pad: clamp(24px, 9vw, 136px);

  /* Fluid spacing scale (scales between a phone and the 1280 container) */
  --space-2xs: clamp(4px,  0.5vw,  6px);
  --space-xs:  clamp(8px,  1vw,   12px);
  --space-sm:  clamp(12px, 1.5vw, 16px);
  --space-md:  clamp(16px, 2.5vw, 24px);
  --space-lg:  clamp(24px, 4vw,   40px);
  --space-xl:  clamp(32px, 6vw,   64px);
  --space-2xl: clamp(48px, 9vw,   96px);
  --space-3xl: clamp(64px, 12vw, 128px);

  /* Global section-heading multiplier. 1 = exact Figma size; lower = smaller.
     0.85 = 15% smaller across every section heading at once. */
  --heading-scale: 0.85;

  /* Fluid type scale (smooth, no breakpoint jumps) */
  --step--1: clamp(13px, 0.9vw, 14px);
  --step-0:  clamp(15px, 1vw,   16px);   /* body */
  --step-1:  clamp(18px, 1.4vw, 20px);   /* lead / eyebrow */
  --step-2:  clamp(20px, 2vw,   24px);
  --step-3:  clamp(24px, 3vw,   32px);   /* h3 */
  --step-4:  clamp(30px, 4vw,   44px);   /* h2 */
  --step-5:  clamp(36px, 5.5vw, 60px);   /* h1 */
  --step-6:  clamp(44px, 7vw,   76px);   /* display */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
}

/* ---- Base element defaults ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  color: var(--text-primary);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; }
img { display: block; max-width: 100%; }