/* ============================================================
   ILCU Design System — global.css
   Source: 1. Primitives.zip · 2. Colour.zip · 3. Typography.zip
   Rule: components reference ONLY Layer 2 semantic vars.
         Never use --primitive-* or hardcoded hex in components.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* ─────────────────────────────────────────────────────────────
   COLOUR — Layer 1: Primitives
   Raw named colour values. No component references these.
   ───────────────────────────────────────────────────────────── */
:root,
:host {
  /* navy */
  --primitive-navy-25: #f2f5f6;
  --primitive-navy-50: #e5ebee;
  --primitive-navy-100: #ccd8dc;
  --primitive-navy-200: #99b1b9;
  --primitive-navy-300: #668a96;
  --primitive-navy-400: #336374;
  --primitive-navy-500: #003c51;
  --primitive-navy-600: #00384b;
  --primitive-navy-700: #003345;
  --primitive-navy-800: #002f3f;
  --primitive-navy-900: #002a39;
  --primitive-navy-950: #00222e;

  /* teal */
  --primitive-teal-25: #f9fdfe;
  --primitive-teal-50: #e8f4f7;
  --primitive-teal-100: #bad9e2;
  --primitive-teal-200: #8bbecd;
  --primitive-teal-300: #5da3b9;
  --primitive-teal-400: #2e88a4;
  --primitive-teal-500: #006d8f;
  --primitive-teal-600: #005773;
  --primitive-teal-700: #004158;
  --primitive-teal-800: #002f41;
  --primitive-teal-900: #002231;
  --primitive-teal-950: #001b28;

  /* sky */
  --primitive-sky-25: #f0fafe;
  --primitive-sky-50: #e5f7fc;
  --primitive-sky-100: #d0f0f9;
  --primitive-sky-200: #b5e8f5;
  --primitive-sky-300: #90ddf0;
  --primitive-sky-400: #73bdd0;
  --primitive-sky-500: #59a0b4;
  --primitive-sky-600: #42879b;
  --primitive-sky-700: #2e7085;
  --primitive-sky-800: #1d5d72;
  --primitive-sky-900: #0e4d62;
  --primitive-sky-950: #07455a;

  /* lime */
  --primitive-lime-25: #f6ffe3;
  --primitive-lime-50: #f1ffd5;
  --primitive-lime-100: #eaffbf;
  --primitive-lime-200: #e0ffa4;
  --primitive-lime-300: #d7ff88;
  --primitive-lime-400: #ceff6e;
  --primitive-lime-500: #aed95a;
  --primitive-lime-600: #8fb448;
  --primitive-lime-700: #709035;
  --primitive-lime-800: #546e23;
  --primitive-lime-900: #3a5014;
  --primitive-lime-950: #2a3d0a;

  /* neutral */
  --primitive-neutral-25: #fdfdfd;
  --primitive-neutral-50: #fafafa;
  --primitive-neutral-100: #f5f5f5;
  --primitive-neutral-200: #e5e5e5;
  --primitive-neutral-300: #d4d4d4;
  --primitive-neutral-400: #a3a3a3;
  --primitive-neutral-500: #737373;
  --primitive-neutral-600: #5a5a5a;
  --primitive-neutral-700: #404040;
  --primitive-neutral-800: #2c2c2c;
  --primitive-neutral-900: #171717;
  --primitive-neutral-950: #101010;

  /* standalone */
  --primitive-white: #ffffff;
  --primitive-off-white: #f4f7f8;

  /* Error colours */
  --primitive-red: #c53030;
}

/* ─────────────────────────────────────────────────────────────
   COLOUR — Layer 2: Semantic tokens (2. Colour collection)
   These are the ONLY colour vars components may use.
   ───────────────────────────────────────────────────────────── */
:root,
:host {
  /* surface — background fills */
  --surface-page: var(--primitive-off-white); /* Main page bg */
  --surface-primary: var(--primitive-white); /* Card / panel bg */
  --surface-hero: var(--primitive-navy-600); /* Dashboard hero band */
  --surface-nav: var(--primitive-navy-950); /* Sidebar bg */
  --surface-overlay-soft: var(--primitive-teal-50); /* Alert / info panels */
  --surface-overlay-wash: var(--primitive-teal-25); /* CTA banner bg */
  --surface-overlay-soft-hover: var(--primitive-sky-200); /* Hover state */
  --surface-cta: var(--primitive-navy-500); /* Dark CTA block bg */
  --surface-inverse: var(
    --primitive-navy-900
  ); /* Download button bg on cards */
  --surface-accent: var(--primitive-lime-400); /* Accent highlight */

  /* text — all text colour roles */
  --text-primary: var(--primitive-navy-500); /* Default body + heading */
  --text-secondary: var(--primitive-neutral-700); /* Supporting body text */
  --text-tertiary: var(--primitive-navy-400); /* Metadata, captions, sub-nav */
  --text-placeholder: var(--primitive-navy-200); /* Search input placeholder */
  --text-on-dark: var(--primitive-white); /* Text on navy surfaces */
  --text-on-dark-muted: var(--primitive-navy-200); /* Subdued text on dark */
  --text-on-hero: var(--primitive-off-white); /* Hero welcome/greeting */
  --text-brand: var(--primitive-teal-500); /* Links, interactive labels */
  --text-accent: var(--primitive-lime-400); /* Breadcrumb, CTA link on dark */
  --text-nav-default: var(--primitive-navy-25); /* Inactive nav labels */
  --text-nav-active: var(--primitive-white); /* Active nav label */
  --text-nav-sub: var(--primitive-navy-100); /* Expanded sub-nav text */
  --text-nav-heading: var(--primitive-neutral-25); /* Sub-nav section header */
  --text-heading-on-dark: var(--primitive-white); /* Page headings in hero */
  --text-contributor-name: var(--primitive-neutral-900); /* Contributor name */
  --text-contributor-role: var(--primitive-neutral-700); /* Contributor role */

  /* border — dividers and outlines */
  --border-subtle: var(--primitive-navy-25); /* TOC dividers, section rules */
  --border-default: var(--primitive-navy-50); /* FAQ dividers, card borders */
  --border-medium: var(--primitive-navy-100); /* Avatar ring borders */
  --border-nav: var(--primitive-navy-700); /* Sidebar section divider */
  --border-toc-active: var(--primitive-lime-400); /* Active TOC left border */
  --border-toc-default: var(--primitive-teal-50); /* Inactive TOC left border */
  --border-nav-active: var(
    --primitive-lime-400
  ); /* Active nav left indicator */
  --border-highlight: var(--primitive-navy-500); /* Highlight border */
  --border-accent: var(--primitive-lime-400); /* Accent border */
  /* alpha variants — stored as rgba (CSS cannot apply opacity to a var) */
  --border-subtle-alpha: rgba(242, 245, 246, 0.1); /* navy/25 @ 10% */
  --border-card: rgba(0, 60, 81, 0.15); /* navy/500 @ 15% */
  --border-input: rgba(0, 60, 81, 0.65); /* navy/500 @ 65% */
  --border-search-bar: rgba(0, 47, 63, 0.08); /* navy/800 @ 8% */

  /* icon — fill colours */
  --icon-default: var(--primitive-navy-500); /* Default icon fill */
  --icon-muted: var(--primitive-navy-400); /* Metadata icons */
  --icon-on-dark: var(--primitive-white); /* Icons on dark surfaces */
  --icon-brand: var(--primitive-teal-500); /* Brand-coloured icons */
  --icon-accent: var(--primitive-lime-400); /* Accent icons */

  /* interactive — states */
  --interactive-primary-bg: var(
    --primitive-lime-400
  ); /* Primary button (Search) bg */
  --interactive-primary-text: var(
    --primitive-navy-500
  ); /* Text on lime button */
  --interactive-secondary-bg: var(
    --primitive-navy-800
  ); /* Quick link pill bg */
  --interactive-secondary-text: var(--primitive-white); /* Text on dark pill */
  --interactive-nav-active-bg: rgba(
    255,
    255,
    255,
    0.12
  ); /* Active nav bg (white 12%) */
  --interactive-nav-hover-bg: rgba(
    255,
    255,
    255,
    0.05
  ); /* Hover nav bg (white 5%) */
  --interactive-link-default: var(
    --primitive-teal-500
  ); /* Default link colour */
  --interactive-link-on-dark: var(--primitive-lime-400); /* Link on dark bg */
  --interactive-download-bg: var(--primitive-navy-900); /* Download button bg */
  --interactive-download-text: var(
    --primitive-white
  ); /* Download button text */

  /* badge */
  --badge-file-bg: var(--primitive-sky-300); /* File type badge bg */
  --badge-file-text: var(--primitive-navy-500); /* File badge text */
  --badge-category-bg: var(--primitive-teal-50); /* Category badge bg */
  --badge-category-text: var(--primitive-navy-500); /* Category badge text */

  /* avatar */
  --avatar-bg: var(--primitive-navy-25);
  --avatar-border: var(--primitive-navy-50);
  --avatar-text: var(--primitive-navy-500);
  --avatar-bg-neutral: var(--primitive-neutral-100);
  --avatar-border-neutral: var(--primitive-neutral-200);
  --avatar-text-neutral: var(--primitive-neutral-500);

  /* utility-bar */
  --utility-bar-bg: var(--primitive-off-white); /* Utility bar background */
  --utility-bar-text: var(--primitive-navy-500); /* Utility bar link text */

  /* tooltip */
  --tooltip-bg: var(--primitive-navy-950);
  --tooltip-text: var(--primitive-white);

  /* overlay gradients */
  --overlay-card-gradient-from: rgba(0, 60, 81, 0); /* navy/500 @ 0% */
  --overlay-card-gradient-to: rgba(0, 60, 81, 0.8); /* navy/500 @ 80% */

  /* error */
  --error-text: var(--primitive-red);
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY — Layer 1: Font-size primitives
   Source: 3. Typography · Desktop mode (default)
   Values are px equivalents of the numeric Figma variables.
   ───────────────────────────────────────────────────────────── */
:root,
:host {
  /* heading */
  --font-size-heading-display: 48px; /* Page title in header band */
  --font-size-heading-xl: 32px; /* CTA block heading */
  --font-size-heading-lg: 28px; /* Dashboard hero heading */
  --font-size-heading-md: 24px; /* Section headings in rich text */
  --font-size-heading-sm: 20px; /* Card headings, alert titles */
  --font-size-heading-xs: 18px; /* FAQ questions, webinar titles */

  /* body */
  --font-size-body-lead: 22px; /* Intro/lead paragraph */
  --font-size-body-lg: 18px; /* Body copy on content pages */
  --font-size-body-default: 16px; /* Standard body text */
  --font-size-body-sm: 14px; /* Card descriptions, captions */
  --font-size-body-xs: 12px; /* Card descriptions, captions */
  --font-size-body-xxs: 10px; /* Card descriptions, captions */

  /* label */
  --font-size-label-lg: 16px; /* TOC items, sidebar nav links */
  --font-size-label-default: 14px; /* Buttons, download labels */
  --font-size-label-sm: 13px; /* Breadcrumbs, overline labels */
  --font-size-label-xs: 12px; /* Quick link tags, metadata */
  --font-size-label-nav: 11px; /* Collapsed sidebar icon labels */

  /* ui */
  --font-size-ui-search-button: 16px; /* Search button label */
  --font-size-ui-card-title: 16px; /* Resource and webinar card titles */
  --font-size-ui-badge: 10px; /* File type badge labels */
  --font-size-ui-avatar: 16px; /* Avatar initials */
  --font-size-ui-caption: 14px; /* Image caption text */
}

/* Mobile mode override — only heading + body-lead scale down */
@media (max-width: 768px) {
  :root,
  :host {
    --font-size-heading-display: 32px;
    --font-size-heading-xl: 22px;
    --font-size-heading-lg: 20px;
    --font-size-heading-md: 18px;
    --font-size-heading-sm: 16px;
    --font-size-heading-xs: 14px;
    --font-size-body-lead: 20px;
  }
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY — Layer 2: Text style utility classes
   Source: Figma Text Styles (reference Layer 1 size vars)
   Components apply .ts-* — never hardcode font properties.
   Font family: Poppins throughout.
   Letter-spacing: Figma raw value ÷ 100 → em
   ───────────────────────────────────────────────────────────── */

.ts-heading-display {
  font-family: "Poppins";
  font-size: var(--font-size-heading-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.ts-heading-xl {
  font-family: "Poppins";
  font-size: var(--font-size-heading-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.ts-heading-lg {
  font-family: "Poppins";
  font-size: var(--font-size-heading-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.ts-heading-md {
  font-family: "Poppins";
  font-size: var(--font-size-heading-md);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.ts-heading-sm {
  font-family: "Poppins";
  font-size: var(--font-size-heading-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.ts-heading-xs {
  font-family: "Poppins";
  font-size: var(--font-size-heading-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ts-body-lead {
  font-family: "Poppins";
  font-size: var(--font-size-body-lead);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.02em;
}
.ts-body-lg {
  font-family: "Poppins";
  font-size: var(--font-size-body-lg);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
}
.ts-body-default {
  font-family: "Poppins";
  font-size: var(--font-size-body-default);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.ts-body-sm {
  font-family: "Poppins";
  font-size: var(--font-size-body-sm);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ts-body-xs {
  font-family: "Poppins";
  font-size: var(--font-size-body-xs);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ts-body-xxs {
  font-family: "Poppins";
  font-size: var(--font-size-body-xxs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.ts-label-lg {
  font-family: "Poppins";
  font-size: var(--font-size-label-lg);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
.ts-label-default {
  font-family: "Poppins";
  font-size: var(--font-size-label-default);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ts-label-default-strong {
  font-family: "Poppins";
  font-size: var(--font-size-label-default);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ts-label-sm {
  font-family: "Poppins";
  font-size: var(--font-size-label-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
.ts-label-xs {
  font-family: "Poppins";
  font-size: var(--font-size-label-xs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ts-label-xs-strong {
  font-family: "Poppins";
  font-size: var(--font-size-label-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ts-label-nav {
  font-family: "Poppins";
  font-size: var(--font-size-label-nav);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.ts-ui-search-button {
  font-family: "Poppins";
  font-size: var(--font-size-ui-search-button);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.ts-ui-card-title {
  font-family: "Poppins";
  font-size: var(--font-size-ui-card-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.ts-ui-badge {
  font-family: "Poppins";
  font-size: var(--font-size-ui-badge);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ts-ui-avatar {
  font-family: "Poppins";
  font-size: var(--font-size-ui-avatar);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.ts-ui-caption {
  font-family: "Poppins";
  font-size: var(--font-size-ui-caption);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.ts-ui-link-sm {
  font-family: "Poppins";
  font-size: var(--font-size-label-xs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────────────────────
   Spacing, Radius & Shadows
   ───────────────────────────────────────────────────────────── */
:root,
:host {
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-md: 8px;
  --spacing-sm: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-8xl: 80px;
  --spacing-12xl: 128px;

  --radius-xl: 12px;

  --shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
  --shadow-lg:
    0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03),
    0 2px 2px -1px rgba(0, 0, 0, 0.04);
}

/* ─────────────────────────────────────────────────────────────
   Base reset
   ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins";
  background-color: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.skip-to-content {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 8px 16px;
  background: #ffffff;
  color: #000000;
  border-radius: 4px;
  transform: translateY(-150%);
  transition: transform 150ms ease-in-out;
}

.skip-to-content:focus {
  transform: translateY(0);
}

a {
  color: var(--interactive-link-default);
  text-decoration: none;
}

/* a:hover {
  text-decoration: underline;
} */

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}