/* PNGCORE design system — tokens.css
   Semantic custom properties. Adapted from www.pngcore.org.pg (CORE blue #0082CB, CORE green #93D500,
   CORE grey #888B8D, measured navy band #00263B) and contrast-checked (see brief/DESIGN-BRIEF.md §3). */
:root {
  /* brand */
  --pc-brand: #0082CB;        /* CORE blue: fills, rules, icons, large text (white on it 4.15:1 — large text/UI only) */
  --pc-brand-700: #006BA8;    /* links, primary button on light (white 5.72:1) */
  --pc-brand-800: #005587;    /* hover (white 7.93:1) */
  --pc-brand-900: #003A5E;    /* deep panels (white 11.89:1, green 6.65:1) */
  --pc-brand-50: #E8F3FA;     /* tints, icon chips, dropdown hover */
  --pc-brand-100: #CFE6F5;
  --pc-accent: #93D500;       /* CORE green: on dark backgrounds only (ink text on it 9.8:1); never as text on white */
  --pc-accent-700: #4C7100;   /* green as text on light (5.72:1) */
  --pc-accent-50: #F1FAD9;
  --pc-on-accent: #0B1B27;    /* text/icons on CORE green; deliberately NOT re-mapped by .pc-dark (9.8:1) */
  --pc-grey: #888B8D;         /* CORE grey: logo grey, decorative rules, form borders — UI only (3.43:1) */
  --pc-navy: #00263B;         /* the measured .org.pg hero band colour: dark bands, stats, CTA */
  --pc-navy-800: #0B3550;     /* raised surfaces on navy */
  --pc-navy-900: #001523;     /* footer, utility bar */
  /* neutrals */
  --pc-bg: #FFFFFF;
  --pc-surface: #F3F6F9;
  --pc-surface-2: #E9EEF2;
  --pc-ink: #0B1B27;          /* headings (17.5:1) */
  --pc-text: #243441;         /* body (12.79:1) */
  --pc-muted: #5A6873;        /* meta (5.73:1) */
  --pc-line: #D9E0E6;
  --pc-line-strong: #B9C4CC;
  --pc-on-dark: #FFFFFF;
  --pc-on-dark-muted: #B7C6D1; /* 8.96:1 on navy */
  --pc-on-dark-line: rgba(255,255,255,.16);
  /* roles */
  --pc-link: var(--pc-brand-700);
  --pc-link-hover: var(--pc-brand-800);
  --pc-focus: #0082CB;
  --pc-focus-halo: #FFFFFF;
  --pc-selection: var(--pc-brand-100);
  --pc-error: #B42318;  --pc-error-50: #FDECEA;
  --pc-success: #1B6B2B; --pc-success-50: #E8F5EA;
  --pc-warn: #8A5A00;   --pc-warn-50: #FFF4DB;
  --pc-overlay: linear-gradient(90deg, rgba(0,21,35,.86) 0%, rgba(0,21,35,.70) 42%, rgba(0,21,35,.28) 100%);
  --pc-overlay-bottom: linear-gradient(180deg, rgba(0,21,35,0) 0%, rgba(0,21,35,.22) 40%, rgba(0,21,35,.84) 100%);
  --pc-scrim: rgba(0,21,35,.72);

  /* type */
  --pc-font: 'Archivo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pc-fs-display: clamp(2.5rem, 1.55rem + 3.8vw, 4.5rem);      /* 40 → 72 */
  --pc-fs-h1: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem);           /* 34 → 56 */
  --pc-fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);            /* 28 → 40 */
  --pc-fs-h3: clamp(1.375rem, 1.22rem + .6vw, 1.75rem);          /* 22 → 28 */
  --pc-fs-h4: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);        /* 18 → 21 */
  --pc-fs-h5: 1.0625rem;                                         /* 17 */
  --pc-fs-lead: clamp(1.125rem, 1.06rem + .35vw, 1.3125rem);     /* 18 → 21 */
  --pc-fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);           /* 16 → 17 */
  --pc-fs-small: .9375rem;                                       /* 15 */
  --pc-fs-meta: .8125rem;                                        /* 13 */
  --pc-fs-eyebrow: .8125rem;
  --pc-fs-stat: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);             /* 40 → 64 */
  --pc-fs-nav: .9375rem;
  --pc-fs-btn: .9375rem;
  --pc-lh-tight: 1.05; --pc-lh-heading: 1.15; --pc-lh-body: 1.6; --pc-lh-lead: 1.5;
  --pc-track-display: -.025em; --pc-track-heading: -.015em; --pc-track-eyebrow: .08em;
  --pc-wdth-eyebrow: 112%;
  --pc-measure: 68ch;

  /* space */
  --pc-s1: 4px; --pc-s2: 8px; --pc-s3: 12px; --pc-s4: 16px; --pc-s5: 24px; --pc-s6: 32px;
  --pc-s7: 48px; --pc-s8: 64px; --pc-s9: 96px; --pc-s10: 128px;
  --pc-section: clamp(56px, 4vw + 32px, 104px);
  --pc-section-sm: clamp(40px, 2.5vw + 24px, 64px);
  --pc-gap: clamp(16px, 2vw, 32px);
  --pc-gutter: clamp(16px, 4vw, 40px);
  --pc-container: 1240px;
  --pc-container-narrow: 760px;
  --pc-container-wide: 1440px;
  --pc-header-h: 80px;
  --pc-utility-h: 40px;

  /* shape & depth */
  --pc-r-sm: 4px; --pc-r: 8px; --pc-r-lg: 14px; --pc-r-xl: 20px; --pc-r-pill: 999px;
  --pc-shadow-sm: 0 1px 2px rgba(0,38,59,.06), 0 1px 1px rgba(0,38,59,.04);
  --pc-shadow: 0 1px 2px rgba(0,38,59,.06), 0 10px 28px -12px rgba(0,38,59,.18);
  --pc-shadow-lg: 0 2px 4px rgba(0,38,59,.06), 0 24px 48px -16px rgba(0,38,59,.28);
  --pc-shadow-header: 0 1px 0 var(--pc-line), 0 8px 24px -16px rgba(0,38,59,.25);

  /* motion */
  --pc-dur-1: 120ms; --pc-dur-2: 200ms; --pc-dur-3: 360ms;
  --pc-ease: cubic-bezier(.2,.7,.2,1);
  --pc-ease-out: cubic-bezier(.16,1,.3,1);

  /* layers */
  --pc-z-raised: 10; --pc-z-header: 50; --pc-z-dropdown: 60; --pc-z-drawer: 80; --pc-z-toast: 90; --pc-z-lightbox: 100; --pc-z-skip: 110;
}
/* Dark context: any band with .pc-dark re-maps the roles so components need no dark variants. */
.pc-dark {
  --pc-bg: var(--pc-navy); --pc-surface: var(--pc-navy-800); --pc-surface-2: #12405E;
  --pc-ink: #FFFFFF; --pc-text: #FFFFFF; --pc-muted: var(--pc-on-dark-muted);
  --pc-line: var(--pc-on-dark-line); --pc-line-strong: rgba(255,255,255,.3);
  --pc-link: #FFFFFF; --pc-link-hover: var(--pc-accent);
  --pc-focus: var(--pc-accent); --pc-focus-halo: var(--pc-navy);
  --pc-brand-50: rgba(255,255,255,.08); --pc-brand-700: #FFFFFF;
  color: var(--pc-text); background: var(--pc-bg);
}
@media (prefers-reduced-motion: reduce) {
  :root { --pc-dur-1: 0ms; --pc-dur-2: 0ms; --pc-dur-3: 0ms; }
}