/* ==========================================================================
   Gleaming — Design tokens (extracted from Figma file IHNGiYsyO3gDxsGQH5VkFQ)
   DO NOT EDIT from page-builder agents. Page overrides go in css/pages/<page>.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted fonts
   - Cabinet Grotesk (Fontshare/ITF) — headings, nav, buttons, wordmark
   - Inter (Google Fonts)            — long-form body copy
   - Roboto (Google Fonts)           — small text links / "Text Regular" style
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../assets/fonts/cabinet-grotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../assets/fonts/cabinet-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../assets/fonts/cabinet-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/roboto-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/roboto-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------
     Color — primary (brand blue)
     ------------------------------------------------------------------ */
  --color-primary-50:  #E3E4FC;
  --color-primary-100: #C3C5F8;
  --color-primary-400: #1E2CA2; /* main brand blue */
  --color-primary-500: #19258E;
  --color-primary-800: #09104F;
  --color-primary-950: #020423;

  /* Color — text */
  --color-text-primary:  #141414;
  --color-text-tertiary: #B8B8B8;

  /* Color — neutrals & secondary */
  --color-neutral-800: #170F49;
  --color-neutral-600: #6F6C8F;
  --color-neutral-300: #F1F2F9;
  --color-purple-100:  #F1F0FB;
  --color-secondary-1: #E1EDFB;
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Color — surfaces observed in design */
  --color-page-bg: #FCFCFC;                 /* page background behind nav/hero */
  --color-nav-bg: rgba(255, 255, 255, 0.6); /* translucent navbar pills */
  --color-card-bg: rgba(227, 228, 252, 0.2);/* primary-50 @ 20% — service cards */

  /* ------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------ */
  --font-heading: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-alt: "Roboto", "Helvetica Neue", Arial, sans-serif;

  /* Text sizes (Figma "Text Sizes" variables + observed values) */
  --text-display: 68px;      /* hero headline (Cabinet Grotesk Medium, lh 1.0) */
  --text-h1: 56px;           /* Heading 1 (Cabinet Grotesk Regular, lh 1.2)    */
  --text-h4: 32px;           /* Heading 4 (Cabinet Grotesk Regular, lh 1.3)    */
  --text-md: 18px;           /* Text Medium — hero body, nav links, card body  */
  --text-base: 16px;         /* Text Regular — body / small buttons / links    */
  --text-sm: 14px;           /* Text Small — footer credits                    */
  --text-btn-lg: 24px;       /* large pill button label                        */
  --text-btn: 20px;          /* nav CTA / segment buttons label                */
  --text-logo: 30px;         /* navbar wordmark (30.009px in Figma)            */
  --text-wordmark-giant: 261.176px; /* footer giant "Gleaming"                 */

  /* Mobile overrides (applied via media queries in base/components):
     display 68 -> 44 | h1 56 -> 32..44 | text-md 18 -> 16 | logo 30 -> 17.15
     giant wordmark 261.176 -> 80 */
  --text-display-mobile: 44px;
  --text-h1-mobile: 32px;
  --text-logo-mobile: 17.15px;
  --text-wordmark-giant-mobile: 80px;

  /* Line heights */
  --leading-none: 1;     /* hero display headline */
  --leading-tight: 1.2;  /* headings                */
  --leading-h4: 1.3;     /* heading 4 (cards)       */
  --leading-body: 1.5;   /* all body text           */

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --container-max: 1280px;
  --page-pad: 80px;          /* side padding at 1440 (desktop) */
  --page-pad-tablet: 40px;   /* 768–1023 */
  --page-pad-mobile: 20px;   /* <768 (matches 402px mobile frames) */
  --section-pad: 80px;       /* vertical rhythm between sections */
  --footer-pad-x: 64px;      /* footer uses 64px side padding (Figma padding-global) */

  /* ------------------------------------------------------------------
     Radii (verified on nodes)
     ------------------------------------------------------------------ */
  --radius-pill: 100px;   /* buttons */
  --radius-bar: 200px;    /* desktop navbar pills */
  --radius-card: 40px;    /* cards, footer top corners, mobile navbar */
  --radius-panel: 20px;   /* mobile nav dropdown panel */

  /* ------------------------------------------------------------------
     Spacing scale (consistent 4px grid observed across nodes)
     ------------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
}