/* ═══════════════════════════════════════════════════════════════════
   Intl design tokens — the single source for the palette and depth system.

   Lived in page-front.css until the search widget was shared with the
   teacher-search page, which needs the same tokens without pulling in 700
   lines of homepage CSS. Load this BEFORE any sheet that consumes them.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --cream: #faf7f0;
  --cream-2: #f3eee2;
  --navy: #14213d;
  --ink: #232a35;
  --muted: #5b6472;
  --orange: #ff9c01;
  --orange-d: #e08a00;
  --orange-soft: rgba(255, 156, 1, .12);
  --ai-1: #6d5cff;
  --ai-2: #22a8f0;
  --ai-grad: linear-gradient(135deg, #6d5cff, #22a8f0);
  --ai-soft: rgba(109, 92, 255, .08);
  --ai-line: rgba(109, 92, 255, .28);
  --ok: #2fb473;
  --card: #fff;
  --line: rgba(20, 33, 61, .1);
  --serif: 'Playfair Display', Georgia, serif;
  /* The page's whole depth system: */
  --shadow-sm: 0 8px 22px rgba(20, 33, 61, .08);
  --shadow-md: 0 16px 34px rgba(20, 33, 61, .16);
  --glow-orange: 0 12px 26px rgba(255, 156, 1, .3);
  --glow-ai: 0 12px 26px rgba(109, 92, 255, .2);
}