/* ============================================================
   Headgate — Design tokens + webfonts
   (ported verbatim from the Headgate Design System)
   ============================================================ */

/* ---- Data figures + serif alternative (Google Fonts CDN) ---- */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Geist:wght@400;500;600;700&display=swap');

/* ---- Basis Grotesque Pro (self-hosted brand face) ---- */
@font-face {
  font-family: 'Basis Grotesque Pro';
  src: url('../fonts/BasisGrotesquePro-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basis Grotesque Pro';
  src: url('../fonts/BasisGrotesquePro-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basis Grotesque Pro';
  src: url('../fonts/BasisGrotesquePro-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basis Grotesque Pro';
  src: url('../fonts/BasisGrotesquePro-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- River blue (primary brand) ---- */
  --blue-950: #06243B; --blue-900: #0A3253; --blue-800: #0F436C;
  --blue-700: #155688; --blue-600: #1E6FA6; --blue-500: #2E8BC4;
  --blue-400: #5AA9D8; --blue-300: #93C8E8; --blue-200: #C4E1F2;
  --blue-100: #E4F1F9; --blue-50:  #F1F8FC;

  /* ---- Aqua (water / liquidity accent) ---- */
  --aqua-700: #0B6E94; --aqua-600: #0A8EC0; --aqua-500: #0AAEDC;
  --aqua-400: #46C6E8; --aqua-200: #B4E8F6; --aqua-100: #E2F6FC;

  /* ---- Sand (warm Arizona neutrals) ---- */
  --sand-50:  #FAF7F1; --sand-100: #F4EFE5; --sand-200: #E9E1D1;
  --sand-300: #D8CCB5; --sand-400: #BFAE8F;

  /* ---- Slate (cool neutral text + lines) ---- */
  --slate-900: #14222E; --slate-800: #233747; --slate-700: #364D5F;
  --slate-600: #4F6678; --slate-500: #6E8494; --slate-400: #97A9B6;
  --slate-300: #C2CED7; --slate-200: #DEE6EC; --slate-100: #EDF1F4;

  /* ---- Clay (Arizona sunset accent) ---- */
  --clay-600: #B25636; --clay-500: #C56B45; --clay-300: #E2A988; --clay-100: #F6E4D9;

  --white: #FFFFFF; --black: #061320;

  --green-600: #2F7D55; --green-100: #DDF0E5;
  --amber-600: #B07A18; --amber-100: #F8ECCF;
  --red-600:   #B43A33; --red-100:   #F6DEDC;

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--sand-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--sand-100);
  --surface-inverse: var(--blue-950);
  --surface-brand:   var(--blue-800);
  --surface-accent:  var(--aqua-100);

  --text-strong:   var(--blue-950);
  --text-body:     var(--slate-800);
  --text-muted:    var(--slate-500);
  --text-subtle:   var(--slate-400);
  --text-on-dark:  var(--sand-50);
  --text-on-brand: #EAF4FB;
  --text-link:     var(--blue-700);

  --brand-primary:    var(--blue-700);
  --brand-primary-h:  var(--blue-800);
  --brand-deep:       var(--blue-950);
  --accent-water:     var(--aqua-600);
  --accent-water-h:   var(--aqua-700);
  --accent-sun:       var(--clay-500);

  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-ondark:  rgba(255,255,255,0.16);

  --focus-ring: var(--aqua-500);

  --success-fg: var(--green-600);  --success-bg: var(--green-100);
  --warning-fg: var(--amber-600);  --warning-bg: var(--amber-100);
  --danger-fg:  var(--red-600);    --danger-bg:  var(--red-100);

  /* ---- Families ---- */
  --font-display: 'Basis Grotesque Pro', 'Hanken Grotesk', system-ui, sans-serif;
  --font-display-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-display-alt: var(--font-display-serif);
  --font-sans:    'Basis Grotesque Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-data:    'Geist', 'Basis Grotesque Pro', system-ui, sans-serif;
  --font-mono:    var(--font-data);

  /* ---- Weights ---- */
  --fw-regular:  400; --fw-medium: 500; --fw-semibold: 500; --fw-bold: 700; --fw-extra: 700;

  /* ---- Type scale ---- */
  --fs-display-xl: 76px; --fs-display-l: 56px; --fs-display-m: 42px;
  --fs-h1: 34px; --fs-h2: 27px; --fs-h3: 21px;
  --fs-body-lg: 19px; --fs-body: 16px; --fs-body-sm: 14px;
  --fs-caption: 13px; --fs-eyebrow: 12px;

  /* ---- Line heights ---- */
  --lh-tight: 1.04; --lh-display: 1.08; --lh-snug: 1.22; --lh-normal: 1.5; --lh-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em; --ls-tight: -0.01em; --ls-normal: 0; --ls-eyebrow: 0.24em; --ls-mono: 0.01em;

  /* ---- Spacing (8px base) ---- */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* ---- Radii ---- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  --border-width: 1px; --border-width-strong: 1.5px;

  /* ---- Shadows (cool-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(6, 36, 59, 0.06);
  --shadow-sm: 0 1px 3px rgba(6, 36, 59, 0.08), 0 1px 2px rgba(6, 36, 59, 0.05);
  --shadow-md: 0 4px 12px rgba(6, 36, 59, 0.08), 0 2px 4px rgba(6, 36, 59, 0.05);
  --shadow-lg: 0 12px 32px rgba(6, 36, 59, 0.12), 0 4px 8px rgba(6, 36, 59, 0.06);
  --shadow-xl: 0 24px 60px rgba(6, 36, 59, 0.18);
  --shadow-focus: 0 0 0 3px rgba(10, 174, 220, 0.35);

  /* ---- Layout ---- */
  --container-max: 1200px; --container-narrow: 760px; --gutter: 24px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0.05, 0.25, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms;
}

/* ---- Convenience text roles ---- */
.hg-eyebrow {
  font-family: var(--font-sans); font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}
.hg-display {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--text-strong);
}
.hg-mono {
  font-family: var(--font-data); letter-spacing: var(--ls-mono); font-variant-numeric: tabular-nums;
}