/* Lunani design tokens.
   Brand colours come from the approved final SVG logo fills:
     navy #0B2A4A, logo blue #1688D5, white #FFFFFF.
   Neutrals are supporting UI colours, not brand colours.
   Measured contrast (WCAG 2.x):
     navy on white 14.5:1 · text #172B3A on white 14.6:1 · secondary #526474 on white 6.1:1
     white on logo blue 3.8:1  -> NOT used for normal-size text
     link #0F6DAD on white 5.5:1 · field border #7D8D9C on white 3.4:1 (non-text >= 3:1)
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/inter-latin-wght-normal.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: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/inter-latin-ext-wght-normal.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 */
  --color-navy: #0B2A4A;
  --color-blue: #1688D5;
  --color-white: #FFFFFF;

  /* Supporting UI colours */
  --color-navy-strong: #071F38;   /* hover/pressed state for navy */
  --color-link: #0F6DAD;          /* text-safe blue derived for links (5.5:1) */
  --color-page: #FFFFFF;
  --color-section: #F4F7FA;
  --color-text: #172B3A;
  --color-text-secondary: #526474;
  --color-border: #DDE5EC;
  --color-border-strong: #7D8D9C; /* form controls: >= 3:1 against white */
  --color-on-navy: #FFFFFF;
  --color-on-navy-muted: #A9BCCF;

  /* Status (always paired with words/icons) */
  --color-success: #1B6E43;
  --color-success-bg: #E8F5EE;
  --color-error: #9F1D14;
  --color-error-bg: #FDECEA;
  --color-warning: #7A4D00;
  --color-warning-bg: #FFF4DB;
  --color-info: #0B2A4A;
  --color-info-bg: #EAF3FB;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px */
  --text-lg: 1.1875rem;   /* 19px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.625rem);
  --text-4xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --measure: 65ch;

  /* Spacing scale: 4 8 12 16 24 32 48 64 96 */
  --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;
  --section-pad: clamp(var(--space-7), 6vw, var(--space-9));

  /* Shape & depth */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(11, 42, 74, 0.06), 0 1px 3px rgba(11, 42, 74, 0.06);
  --shadow-md: 0 2px 4px rgba(11, 42, 74, 0.05), 0 8px 24px rgba(11, 42, 74, 0.08);
  --focus-ring: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-blue);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 20px;
  --header-h: 64px;
  --control-h: 48px;
}

@media (min-width: 640px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --header-h: 76px; }
}
