/* ==========================================================================
   NASHORN – Design tokens
   Developed by webndo
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --nashorn-cyan: #009FE3;
  --nashorn-blue: #01498E;
  --nashorn-green: #86BC25;
  --nashorn-grey: #63656A;

  /* Neutrals */
  --navy-950: #07131D;
  --navy-900: #0D1C27;
  --navy-800: #142632;
  --navy-700: #1D3342;
  --text-dark: #0C1A29;
  --text-soft: #3D4B59;
  --off-white: #F5F7F8;
  --soft-grey: #E7EDF1;
  --muted-text: #697682;
  --white: #FFFFFF;

  /* Surfaces */
  --surface-page: #F7F9FB;
  --surface-tint: #EEF2F6;
  --surface-card: #FFFFFF;
  --surface-card-soft: #F3F6F9;
  --line: rgba(12, 26, 41, 0.12);
  --line-strong: rgba(12, 26, 41, 0.22);
  --line-light: rgba(255, 255, 255, 0.16);

  /* Typography
     --font-display  hero H1 + section H2 (weight/tracking via --display-weight, --display-tracking)
     --font-heading  small headings: card titles, highlights, mobile menu
     --font-body     running text
     --font-ui       navigation, buttons, labels, eyebrows */
  --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-display);
  --font-ui: var(--font-body);

  --fs-h1: clamp(2.5rem, 1.6rem + 2.55vw, 3.3rem);        /* 40 → 53 */
  --fs-h2: clamp(2.125rem, 1.3rem + 2.2vw, 3.375rem);     /* 34 → 54 */
  --fs-h2-md: clamp(1.875rem, 1.35rem + 1.4vw, 2.625rem); /* 30 → 42 */
  --fs-h3: clamp(1.375rem, 1.15rem + 0.6vw, 1.75rem);     /* 22 → 28 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);   /* 17 → 19 */
  --fs-body: 1rem;                                          /* 16 */
  --fs-small: 0.875rem;                                     /* 14 */
  --fs-xs: 0.8125rem;                                       /* 13 */
  --fs-nav: 0.875rem;                                       /* 14 */
  --fs-eyebrow: 0.75rem;                                    /* 12 */

  --lh-tight: 1.08;
  --lh-heading: 1.14;
  --lh-body: 1.62;

  --tracking-eyebrow: 0.28em;
  --space-major: clamp(104px, 6vw + 32px, 128px);
  --tracking-label: 0.1em;

  /* Layout */
  --container: 1300px;
  --container-wide: 1360px;
  --gutter: clamp(20px, 4.9vw, 70px);
  --header-h: 88px;
  --header-h-compact: 72px;

  --space-section: clamp(72px, 6vw + 32px, 124px);
  --space-section-sm: clamp(56px, 4vw + 28px, 88px);

  /* Shape */
  --radius-xs: 2px;
  --radius-sm: 3px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(12, 26, 41, 0.04), 0 8px 24px -12px rgba(12, 26, 41, 0.12);
  --shadow-card-hover: 0 2px 4px rgba(12, 26, 41, 0.05), 0 18px 36px -18px rgba(12, 26, 41, 0.22);
  --shadow-header: 0 1px 0 rgba(12, 26, 41, 0.06), 0 10px 30px -18px rgba(12, 26, 41, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
  --dur-reveal: 850ms;

  /* Focus */
  --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--nashorn-cyan);
}