/* UVic BLA — design tokens (colors, type, spacing) */

@font-face {
  font-family: "Proxima Nova";
  src: url("../assets/fonts/ProximaNova-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../assets/fonts/ProximaNova-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colors */
  --bla-purple: #523E7C;
  --bla-navy: #002754;
  --bla-blue: #005493;
  --bla-white: #FFFFFF;

  --bla-purple-dark: #3E2F5E;
  --bla-purple-tint: #EEEBF4;
  --bla-navy-dark: #001B3B;
  --bla-blue-tint: #E8F0F7;
  --bla-ink-soft: #3A4A61;
  --bla-border: #D6DDE7;

  /* Semantic aliases */
  --surface-page: var(--bla-white);
  --surface-card: var(--bla-white);
  --surface-wash: var(--bla-blue-tint);

  --text-heading: var(--bla-navy);
  --text-body: var(--bla-ink-soft);
  --text-on-brand: var(--bla-white);
  --text-link: var(--bla-blue);

  --border-default: var(--bla-border);
  --border-strong: var(--bla-navy);

  --interactive-primary: var(--bla-navy);
  --interactive-primary-hover: var(--bla-navy-dark);
  --interactive-secondary-hover: var(--bla-blue-tint);

  --focus-ring: 0 0 0 3px rgba(0, 84, 147, 0.35);

  /* Type */
  --font-sans: "Proxima Nova", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 64px;
  --weight-regular: 400;
  --weight-bold: 700;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.55;
  --tracking-caps: 0.14em;
  --tracking-caps-wide: 0.22em;

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

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 39, 84, 0.10), 0 4px 16px rgba(0, 39, 84, 0.08);
  --shadow-overlay: 0 8px 40px rgba(0, 27, 59, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

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

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

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--bla-navy); text-decoration: underline; }