/* Self-hosted Figtree variable font — normal and italic axes */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-VariableFont_wght.woff2") format("woff2-variations"),
       url("../fonts/Figtree-VariableFont_wght.ttf")   format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-Italic-VariableFont_wght.woff2") format("woff2-variations"),
       url("../fonts/Figtree-Italic-VariableFont_wght.ttf")   format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Design tokens — all values consumed as CSS custom properties */
:root {
  /* Brand palette */
  --wab-rich-black:   #030823;
  --wab-dark-water:   #024E72;
  --wab-lake-blue:    #5792CC;
  --wab-light-blue:   #8EC2ED;
  --wab-cyan:         #59BAD1;
  --wab-mist-blue:    #BDDCF2;
  --wab-fiery-coral:  #ED5C2F;
  --wab-pastel-snow:  #E8EAF6;
  --wab-full-white:   #FFFFFF;
  --wab-casual-black: #191919;

  /* Warm sand complements */
  --wab-sand-warm:  #9E7D63;
  --wab-sand-light: #BCA291;
  --wab-sand-pale:  #D8CFCA;
  --wab-deep-teal:  #0B76A0;

  /* Semantic surfaces */
  --bg:         var(--wab-pastel-snow);
  --bg-alt:     var(--wab-full-white);
  --bg-inverse: var(--wab-dark-water);
  --bg-deep:    var(--wab-rich-black);

  /* Semantic foreground */
  --fg1:       var(--wab-rich-black);
  --fg2:       var(--wab-dark-water);
  --fg3:       #4A5775;
  --fg-on-dark:   var(--wab-full-white);
  --fg-on-accent: var(--wab-full-white);

  /* Interactive colours */
  --accent:        var(--wab-fiery-coral);
  --accent-hover:  #d44a1f;
  --accent-press:  #b83d18;
  --primary:       var(--wab-dark-water);
  --primary-hover: #013c5a;
  --primary-press: #002b42;
  --link:          var(--wab-dark-water);

  /* Status colours */
  --success: #2e8a6a;
  --warning: #e6a93c;
  --danger:  var(--wab-fiery-coral);
  --info:    var(--wab-lake-blue);

  /* Borders and dividers */
  --border:        rgba(2, 78, 114, 0.14);
  --border-strong: rgba(2, 78, 114, 0.28);
  --divider:       rgba(2, 78, 114, 0.08);

  /* Font stacks */
  --font-display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale */
  --fs-display: 72px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-heading: 1.2;
  --lh-body:    1.55;

  /* Letter-spacing */
  --tracking-claim:  0.05em;
  --tracking-normal: 0;
  --tracking-tight:  -0.01em;

  /* 8-pt spacing scale */
  --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;

  /* Border radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* Elevation shadows */
  --shadow-1:         0 1px 2px rgba(2, 78, 114, 0.10);
  --shadow-2:         0 6px 18px rgba(2, 78, 114, 0.12);
  --shadow-3:         0 16px 40px rgba(2, 78, 114, 0.18);
  --shadow-glow-coral: 0 8px 24px rgba(237, 92, 47, 0.32);
}