/* ============================================================
   Open House 2026 — shared design tokens
   One source of truth for colour. Pages keep their own :root for
   now and point their local names at these, so nothing moves
   visually when this file is first added.
   ============================================================ */
:root {
  /* type — one family across parent and staff pages (fonts.css hosts it) */
  --oh-sans: 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ink + paper */
  --oh-ink:      #13251B;
  --oh-ink-2:    #46584C;
  --oh-muted:    #75857A;
  --oh-line:     #E3EAE4;
  --oh-bg:       #F2F6F1;
  --oh-card:     #FFFFFF;

  /* brand green */
  --oh-green:    #146B3A;
  --oh-green-2:  #1B8A4B;
  --oh-green-l:  #E7F4EB;
  --oh-forest:   #0F2A1C;

  /* accent */
  --oh-cream:    #FFF9EE;
  --oh-gold:     #F2B21A;
  --oh-gold-d:   #A9761B;
  --oh-gold-l:   #FFF4D6;

  /* audience zones */
  --oh-early:    #E9569B;  --oh-early-l:   #FCE7F0;
  --oh-primary:  #2E7BD6;  --oh-primary-l: #E3EEFB;
  --oh-shared:   #1B8A4B;  --oh-shared-l:  #E3F5E9;

  /* mission categories — must match api/lib/mission.php ohMissionCategories() */
  --oh-cat-learn:    #2E8B57;
  --oh-cat-discover: #2563EB;
  --oh-cat-connect:  #D97706;
  --oh-cat-live:     #DB2777;
  --oh-cat-arrival:  #6B7280;
  --oh-cat-bonus:    #F2B21A;

  /* states */
  --oh-lock:     #8B9A91;
  --oh-lock-2:   #B4BFB7;

  --oh-sans: 'IBM Plex Sans Thai', 'IBM Plex Sans', system-ui, sans-serif;

  /* ---- layout ----
     The content column used to stop growing at 1114px, which left a 1920px
     screen more than half empty. These keep growing to 1600. */
  --oh-wrap:  1220px;
  --oh-pad:   clamp(18px, 4vw, 40px);
  --oh-sect:  clamp(56px, 6vw, 96px);

  /* ---- type scale ----
     Steps roughly double so the eye has somewhere to jump. Thai display text
     needs line-height 1.4 or the upper vowels clip into the line above. */
  --oh-t-hero:  clamp(2.4rem, 5.2vw, 4.4rem);
  --oh-t-h2:    clamp(1.55rem, 2.6vw, 2.4rem);
  --oh-t-h3:    1.06rem;
  --oh-t-body:  .95rem;
  --oh-t-label: .78rem;
  --oh-lh-tight: 1.4;

  /* ---- spacing ----
     Inside a group is always tighter than between groups, so proximity
     carries the grouping instead of every gap being identical. */
  --oh-gap-in:  16px;
  --oh-gap-mid: 34px;

  /* ---- surface ---- */
  --oh-r:      24px;
  --oh-r-s:    16px;
  --oh-shadow:    0 14px 34px -20px rgba(7, 91, 59, .42);
  --oh-shadow-lg: 0 24px 54px -28px rgba(7, 91, 59, .5);
}