/* ============================================================
   XAVER 2026 Design System — foundations for welly.
   Tokens copied verbatim from the design handoff
   (docs/design_reference/xaver-colors_and_type.css).
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Funnel Display";
  src: url("/assets/FunnelDisplay-VariableFont_wght-fdf637ff.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/Figtree-VariableFont_wght-89352678.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/Figtree-Italic-VariableFont_wght-cdc1fc1e.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand colours ---------- */
  --xaver-navy:        #091435;
  --xaver-light-blue:  #8EB8DF;
  --xaver-charcoal:    #323132;
  --xaver-white:       #FFFFFF;

  /* Highlight colours — use sparingly, NEVER together */
  --xaver-orange:      #F09124;
  --xaver-pink:        #F087B2;

  /* ---------- Tints & supporting steps ---------- */
  --xaver-navy-900:    #060D24;
  --xaver-navy-800:    #091435;
  --xaver-navy-700:    #15204A;
  --xaver-navy-600:    #25315F;
  --xaver-blue-300:    #B7D2EC;
  --xaver-blue-200:    #D7E6F4;
  --xaver-blue-100:    #EDF4FB;

  /* ---------- Neutrals ---------- */
  --xaver-grey-50:     #F6F7F9;
  --xaver-grey-100:    #ECEEF1;
  --xaver-grey-200:    #DCDFE5;
  --xaver-grey-300:    #C2C7D0;
  --xaver-grey-400:    #9AA1AD;
  --xaver-grey-500:    #6B7280;
  --xaver-grey-600:    #4A4E55;
  --xaver-grey-700:    #323132;

  /* ---------- Semantic — foreground ---------- */
  --fg-1: var(--xaver-navy);
  --fg-2: var(--xaver-grey-600);
  --fg-3: var(--xaver-grey-500);
  --fg-on-dark-1: var(--xaver-white);
  --fg-on-dark-2: var(--xaver-blue-300);
  --fg-on-dark-3: #8C97B5;

  /* ---------- Semantic — background ---------- */
  --bg-1: var(--xaver-white);
  --bg-2: var(--xaver-blue-100);
  --bg-3: var(--xaver-grey-50);
  --bg-dark-1: var(--xaver-navy);
  --bg-dark-2: var(--xaver-navy-900);
  --bg-dark-raised: var(--xaver-navy-700);

  /* ---------- Semantic — lines & accents ---------- */
  --border-light: var(--xaver-grey-200);
  --border-dark:  var(--xaver-navy-600);
  --accent:       var(--xaver-light-blue);
  --accent-strong: var(--xaver-navy);
  --highlight-warm: var(--xaver-orange);
  --highlight-soft: var(--xaver-pink);

  /* ---------- Type families ---------- */
  --font-display: "Funnel Display", "Arial Black", sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Type scale ---------- */
  --text-display: 700 clamp(3rem, 6vw, 5.5rem)/0.98 var(--font-display);
  --text-h1: 700 clamp(2.5rem, 4.5vw, 4rem)/1.02 var(--font-display);
  --text-h2: 700 clamp(2rem, 3vw, 2.75rem)/1.06 var(--font-display);
  --text-h3: 700 1.5rem/1.12 var(--font-display);
  --text-h4: 600 1.25rem/1.2 var(--font-body);
  --text-subhead: 600 1.125rem/1.45 var(--font-body);
  --text-body-lg: 400 1.1875rem/1.6 var(--font-body);
  --text-body: 400 1rem/1.6 var(--font-body);
  --text-body-sm: 400 0.875rem/1.55 var(--font-body);
  --text-caption: 500 0.75rem/1.4 var(--font-body);
  --text-overline: 600 0.75rem/1.2 var(--font-body);

  /* ---------- Tracking ---------- */
  --tracking-display: -0.01em;
  --tracking-tight: -0.015em;
  --tracking-wordmark: 0.18em;
  --tracking-overline: 0.16em;

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

  /* ---------- Spacing scale (4px base) ---------- */
  --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;

  /* ---------- Elevation (navy-tinted, never grey-black) ---------- */
  --shadow-sm: 0 1px 2px rgba(9, 20, 53, 0.06), 0 1px 3px rgba(9, 20, 53, 0.08);
  --shadow-md: 0 4px 10px rgba(9, 20, 53, 0.08), 0 2px 4px rgba(9, 20, 53, 0.06);
  --shadow-lg: 0 18px 40px rgba(9, 20, 53, 0.12), 0 6px 14px rgba(9, 20, 53, 0.08);
  --shadow-focus: 0 0 0 3px rgba(142, 184, 223, 0.55);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* Isometric pattern overlay for navy panels (~9% opacity per the handoff).
   The parent needs position:relative and overflow:hidden. */
.pattern-overlay {
  position: absolute;
  inset: 0;
  background: url("/assets/pattern-42e0a4dc.svg") 0 0 / 900px auto repeat;
  opacity: 0.09;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}