/* ==========================================================================
   Rakaiz Babel — design tokens
   Every colour, font, size and spacing value used on the site is declared
   here as a CSS custom property. Change a value here and it updates
   everywhere on every page.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&display=swap");

:root {

  /* --- Typefaces -------------------------------------------------------- */
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* --- Brand colours ---------------------------------------------------- */
  --lapis-900: #0B2C4D;
  --lapis-800: #0F3E6C;
  --lapis-700: #13487C;
  --lapis-600: #16528C;
  --lapis-400: #5C90BF;
  --lapis-200: #AFC9E0;
  --lapis-100: #C4D8EB;
  --lapis-050: #EDF3F9;

  --brass-700: #8A6430;
  --brass-600: #B08343;
  --brass-300: #DCC49B;
  --brass-100: #F2E9DA;

  /* --- Neutrals --------------------------------------------------------- */
  --white: #FFFFFF;
  --ink: #141414;
  --ink-soft: #3F3F3F;
  --grey-600: #6A6A6A;
  --grey-500: #929292;
  --grey-400: #C1C1C1;
  --grey-300: #DDDDDD;
  --grey-200: #EBEBEB;
  --grey-100: #F2F2F2;
  --grey-050: #F7F7F7;

  /* --- Status ----------------------------------------------------------- */
  --green-600: #1F7A4D;
  --red-600: #C13515;

  /* --- Semantic surfaces ------------------------------------------------ */
  --color-canvas: var(--white);
  --color-surface-soft: var(--grey-050);
  --color-surface-inverse: var(--ink);
  --color-surface-brand: var(--lapis-600);

  /* --- Semantic text ---------------------------------------------------- */
  --color-ink: var(--ink);
  --color-body: var(--ink-soft);
  --color-muted: var(--grey-600);
  --color-on-primary: var(--white);
  --color-on-inverse: var(--white);
  --color-link: var(--lapis-600);
  --color-link-hover: var(--lapis-800);

  /* --- Semantic action -------------------------------------------------- */
  --color-primary: var(--lapis-600);
  --color-primary-hover: var(--lapis-700);
  --color-primary-active: var(--lapis-800);
  --color-accent: var(--brass-600);

  /* --- Lines ------------------------------------------------------------ */
  --color-hairline: var(--grey-300);
  --color-hairline-soft: var(--grey-200);
  --color-border-strong: var(--grey-400);
  --color-focus: var(--ink);

  /* --- Type scale ------------------------------------------------------- */
  --text-display-xxl: 600 56px/1.05 var(--font-display);
  --text-display-xl: 600 40px/1.1 var(--font-display);
  --text-display-lg: 600 28px/1.2 var(--font-display);
  --text-display-md: 600 22px/1.3 var(--font-sans);
  --text-display-sm: 600 20px/1.2 var(--font-sans);
  --text-title-md: 600 16px/1.25 var(--font-sans);
  --text-title-sm: 500 16px/1.25 var(--font-sans);
  --text-body-lg: 400 18px/1.55 var(--font-sans);
  --text-body-md: 400 16px/1.5 var(--font-sans);
  --text-body-sm: 400 14px/1.43 var(--font-sans);
  --text-caption: 500 14px/1.29 var(--font-sans);
  --text-caption-sm: 400 13px/1.23 var(--font-sans);
  --text-micro-label: 700 12px/1.33 var(--font-sans);
  --text-eyebrow: 700 12px/1.2 var(--font-sans);
  --text-button-md: 500 16px/1.25 var(--font-sans);
  --text-button-sm: 500 14px/1.29 var(--font-sans);
  --text-nav-link: 600 15px/1.25 var(--font-sans);
  --text-stat: 600 44px/1.05 var(--font-display);

  --tracking-display-xxl: -1.5px;
  --tracking-display-xl: -1px;
  --tracking-display-lg: -0.5px;
  --tracking-display-md: -0.3px;
  --tracking-display-sm: -0.18px;
  --tracking-eyebrow: 1.2px;

  /* --- Spacing ---------------------------------------------------------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 64px;
  --space-section-lg: 96px;

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1280px;
  --container-narrow: 1080px;
  --gutter-card: 16px;
  --gutter-column: 24px;
  --page-inset: 40px;
  --page-inset-mobile: 20px;
  --nav-height: 80px;

  /* --- Radii ------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --radius-arch: 200px 200px 14px 14px;

  /* --- Elevation and motion --------------------------------------------- */
  --shadow-float: rgba(0, 0, 0, .02) 0 0 0 1px, rgba(0, 0, 0, .04) 0 2px 6px 0, rgba(0, 0, 0, .1) 0 4px 8px 0;
  --transition-fast: 140ms cubic-bezier(.2, 0, 0, 1);
  --transition-base: 220ms cubic-bezier(.2, 0, 0, 1);
}