/* Hallmark · genre: editorial · theme: custom "Night Programme"
 * vibe: "conference programme printed in IU navy, gold for what matters"
 * anchor: IU navy (hue 262) + MBIC gold carried over from the 2026 edition (hue 85)
 * axes: light paper / grotesk-condensed display / warm accent
 * fonts: Archivo (display, condensed width) + Source Serif 4 (body)
 */
:root {
  /* ── Colour · paper (cool off-white, tinted toward navy) ─── */
  --color-paper:        oklch(97.8% 0.006 255);
  --color-paper-2:      oklch(95.2% 0.011 255);
  --color-paper-3:      oklch(91.6% 0.016 255);
  --color-rule:         oklch(85.5% 0.016 255);
  --color-rule-strong:  oklch(30% 0.05 262);

  /* ── Colour · ink (IU navy) ──────────────────────────────── */
  --color-ink:          oklch(23% 0.065 263);
  --color-ink-2:        oklch(38% 0.045 261);
  --color-ink-3:        oklch(49% 0.032 258);

  /* ── Colour · accent (MBIC gold) ─────────────────────────── */
  --color-accent:       oklch(84% 0.15 84);
  --color-accent-soft:  oklch(93.5% 0.07 88);
  --color-accent-deep:  oklch(50% 0.11 70);
  --color-on-accent:    oklch(23% 0.065 263);

  /* ── Colour · inverse (navy band, hero scrim) ────────────── */
  --color-inverse:      oklch(23% 0.065 263);
  --color-inverse-2:    oklch(28% 0.07 263);
  --color-on-inverse:   oklch(96.5% 0.008 255);
  --color-on-inverse-2: oklch(82% 0.025 258);
  --color-rule-inverse: oklch(40% 0.06 263);
  --color-scrim-strong: oklch(17% 0.06 263 / 0.88);
  --color-scrim-mid:    oklch(17% 0.06 263 / 0.62);
  --color-scrim-clear:  oklch(17% 0.06 263 / 0);
  --color-on-photo:     oklch(98% 0.005 255);

  /* ── Colour · state ──────────────────────────────────────── */
  --color-focus:        oklch(55% 0.16 65);
  --color-error:        oklch(50% 0.18 28);
  --color-error-soft:   oklch(95.5% 0.03 28);
  --color-success:      oklch(46% 0.11 150);
  --color-success-soft: oklch(95.5% 0.035 150);
  --color-tbc:          oklch(62% 0.17 330);
  --color-tbc-soft:     oklch(95% 0.04 330);

  /* ── UN SDG goal colours (official palette; used only on SDG tiles) ── */
  --sdg-1: #E5243B;  --sdg-2: #DDA63A;  --sdg-3: #4C9F38;  --sdg-4: #C5192D;  --sdg-5: #FF3A21;
  --sdg-6: #26BDE2;  --sdg-7: #FCC30B;  --sdg-8: #A21942;  --sdg-9: #FD6925;  --sdg-10: #DD1367;
  --sdg-11: #FD9D24; --sdg-12: #BF8B2E; --sdg-13: #3F7E44; --sdg-14: #0A97D9; --sdg-15: #56C02B;
  --sdg-16: #00689D; --sdg-17: #19486A;
  --color-cbt:      oklch(42% 0.09 160);  /* mangrove green — Cần Giờ highlight */
  --color-cbt-soft: oklch(95% 0.035 160);

  /* ── Type ────────────────────────────────────────────────── */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Source Serif 4", "Iowan Old Style", Georgia, serif;

  --text-xs:   0.8125rem;  /* 13px — labels, metadata */
  --text-sm:   0.9375rem;  /* 15px */
  --text-base: 1.125rem;   /* 18px — serif body */
  --text-md:   1.3125rem;  /* 21px */
  --text-lg:   1.625rem;   /* 26px */
  --text-xl:   2rem;       /* 32px */
  --text-2xl:  2.5rem;     /* 40px */
  --text-display-s: clamp(2.25rem, 3.6vw + 1rem, 4rem);
  --text-display:   clamp(3rem, 7vw + 1rem, 7.5rem);
  --text-hero:      clamp(3.25rem, 9vw + 1rem, 9rem);
  --text-num:       clamp(3rem, 5vw + 1.5rem, 5.5rem);
  --text-stage:     clamp(2.75rem, 5vw + 1rem, 5rem);

  --leading-tight: 0.98;
  --leading-snug:  1.2;
  --leading-body:  1.6;

  --width-condensed: 78%;
  --width-normal:    100%;

  /* ── Space (4-pt scale) ──────────────────────────────────── */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --page-max:    76rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --measure:     62ch;

  /* ── Rules, radii ────────────────────────────────────────── */
  --rule-hair:   1px;
  --rule-strong: 3px;
  --radius-input: 2px;
  --radius-card:  2px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ── Chrome sizes ────────────────────────────────────────── */
  --banner-h: 2.5rem;
  --bar-h:    4rem;

  /* ── Z scale ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
}