/* wenlueducation design tokens — Warm Institutional
 *
 * Palette + font + spacing choices fixed by user 2026-05-27. Do not adjust
 * values without their go-ahead. Structural conventions (8px grid, 4 radius
 * tokens, subtle shadows, font-stack ordering) inherited from browserpsylab's
 * design system.
 *
 * This file holds nothing but CSS custom properties on :root. Reset, font
 * loading, and component styles live in base.css. Animations live in
 * motion.css + motion.js.
 */
:root {
  /* ── Brand ────────────────────────────────────────────── */
  --wl-primary:       #2D5F4A;  /* deep pine green: buttons, links, heading accents, stat values */
  --wl-primary-hover: #1F4632;
  --wl-primary-light: #E8F0EC;  /* selected items, icon backgrounds, hover wash */

  /* ── Neutrals ─────────────────────────────────────────── */
  --wl-bg:            #FAF7F2;  /* page background — warm cream */
  --wl-card:          #FFFFFF;
  --wl-text:          #1A1F36;  /* primary text */
  --wl-text-muted:    #6B6759;  /* warm gray */
  --wl-border:        #E5E0D5;
  --wl-border-strong: #CFC9B9;

  /* ── Status family — small badges only, never large fills ── */
  --wl-mint:       #D4ECE7;
  --wl-mint-dark:  #0D7560;
  --wl-amber:      #FEF3C7;
  --wl-amber-dark: #92400E;
  --wl-rose:       #FCE7E9;
  --wl-rose-dark:  #B91C1C;
  --wl-error:      #D9534F;

  /* ── Fonts ────────────────────────────────────────────── */
  /* Latin glyphs render from the EN font first; CN glyphs fall through to
   * the SC font. This preserves the typeface designer's proportions for
   * each script. Same rule applies to serif and sans. */
  --wl-font-serif: 'DM Serif Display', 'Noto Serif SC', Georgia, 'Songti SC', serif;
  --wl-font-sans:  'DM Sans', 'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --wl-font-mono:  'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Spacing — 8px grid, multiples of 4 only ──────────── */
  --wl-space-1:  4px;
  --wl-space-2:  8px;
  --wl-space-3:  12px;
  --wl-space-4:  16px;
  --wl-space-5:  20px;
  --wl-space-6:  24px;
  --wl-space-8:  32px;
  --wl-space-12: 48px;
  --wl-space-16: 64px;

  /* ── Radii — four tokens only, do not invent more ─────── */
  --wl-radius-pill: 999px;   /* buttons, search inputs, pagination */
  --wl-radius-lg:   8px;     /* cards, modals, panels */
  --wl-radius-md:   6px;     /* form inputs */
  --wl-radius-sm:   4px;     /* badges, small tags */

  /* ── Shadows — subtle only, never above 0 4px 8px ─────── */
  --wl-shadow-card:  0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --wl-shadow-focus: 0 0 0 3px rgba(45, 95, 74, 0.15);

  /* ── Motion timing — matches browserpsylab convention ─── */
  --wl-dur-hover:  120ms;
  --wl-dur-enter:  300ms;
  --wl-dur-reveal: 450ms;
  --wl-ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── Layout caps ──────────────────────────────────────── */
  --wl-content-max:  1080px;
  --wl-content-pad:  var(--wl-space-8);
}