/* Nextage Group — design tokens
   Single source of truth for color, type, spacing.
   Import once at the top of your global stylesheet:
       @import './nextage-tokens.css';
   Then use var(--token) everywhere. Do not hardcode hex values. */

/* Fonts are self-hosted (21 Sep 2026). They were previously pulled from Google
   Fonts with an @import on this line. That worked, but an @import inside a CSS
   file serialises: the browser had to fetch this file, parse it, fetch Google's
   CSS, then fetch the woff2. Self-hosting removes two round trips and a
   third-party origin. Variable fonts, so one file per family covers every
   weight the design system uses. Both are SIL Open Font Licence.
   To change weights you do not need new files; just use the token. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Brand blue (the only brand hue) ---- */
  --blue-50: #eaf2fb;
  --blue-100: #cfe2f6;
  --blue-300: #8fbbe9;
  --blue-500: #3784d7;
  --blue-600: #2b6bb3;
  --blue-700: #1f4f85;

  /* ---- Slate (text) ---- */
  --slate-900: #23272e;
  --slate-700: #3e454f;
  --slate-500: #6b7280;
  --slate-300: #a3a9b1;

  /* ---- Neutrals (surfaces, borders) ---- */
  --gray-50: #f5f6f7;
  --gray-100: #f2f2f2;
  --gray-200: #e3e6e9;
  --gray-300: #d3d7db;
  --white: #ffffff;

  /* ---- Semantic ---- */
  --color-brand-primary: var(--blue-500);
  --color-brand-primary-hover: var(--blue-600);
  --color-brand-primary-tint: var(--blue-50);
  --color-brand-deep: var(--blue-700);

  --color-text-heading: var(--slate-900);
  --color-text-body: var(--slate-700);
  --color-text-muted: var(--slate-500);
  --color-text-placeholder: var(--slate-300);
  --color-text-on-brand: var(--white);

  --color-surface-page: var(--white);
  --color-surface-sunken: var(--gray-50);
  --color-surface-panel: var(--gray-100);

  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);

  --color-link: var(--blue-500);
  --color-link-hover: var(--blue-600);
  --color-focus-ring: var(--blue-500);

  /* ---- Type ---- */
  --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --text-3xl: 44px;
  --text-2xl: 32px;
  --text-xl: 24px;
  --text-lg: 19px;
  --text-base: 15px;
  --text-sm: 13px;
  --text-xs: 11px;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ---- Spacing (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;

  /* ---- Radius / elevation ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(35, 39, 46, 0.06), 0 4px 16px rgba(35, 39, 46, 0.08);
  --shadow-panel: 0 2px 8px rgba(35, 39, 46, 0.05);

  /* ---- Layout ---- */
  --page-margin: 56px;
  --content-max: 1200px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
}

/* ---- Base resets, safe to keep ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  background: var(--color-surface-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-extrabold); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

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