/* KVCN Design System — canonical token layer
   Source of truth for kvcn.org, learn.kvcn.org (Voices Academy), and Pulse.
   Derived from the KVCN crest: navy #0b2a5b, gold #c6a24a, sakura red #d6453f.
   Import once: <link rel="stylesheet" href="tokens.css">
   Product code should use the semantic --color-* aliases; they re-point under
   [data-theme="dark"]. */

:root {
  /* ---- Navy ramp (crest primary) ---- */
  --navy-900: #071d40; /* deepest — gradient stop, footers */
  --navy-800: #0b2a5b; /* primary brand */
  --navy-700: #0e3470; /* hover / gradient top */
  --navy-600: #154089;

  /* ---- Gold ramp (crest accent) ---- */
  --gold-300: #e7d4a1; /* soft tint */
  --gold-500: #c6a24a; /* canonical accent */
  --gold-600: #b18c33;
  --gold-700: #8a6a23; /* AA gold-family text on white (6.1:1) */
  --gold-kiwanis: #ffc72c; /* official Kiwanis bright gold — hero CTAs only */

  /* ---- Sakura red (rare accent) ---- */
  --red-500: #d6453f;
  --red-700: #a8302b; /* AA red text on white */

  /* ---- Neutrals ---- */
  --ink: #13243f;
  --ink-muted: #5b6b85;
  --line: #e4e9f2;
  --line-strong: rgba(11, 42, 91, 0.16);
  --canvas: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f6f8fb;

  /* ---- Status families ---- */
  --status-success: #1f9d6b;
  --status-success-bg: #e3f6ee;
  --status-warning: #9a6b06;
  --status-warning-bg: #fdf0d8;
  --status-error: #d6453f;
  --status-error-bg: #fbe6e5;
  --status-info: #2f74d0;
  --status-info-bg: #e6effb;

  /* ---- Semantic aliases (use these in product code) ---- */
  --color-primary: var(--navy-800);
  --color-primary-hover: var(--navy-700);
  --color-accent: var(--gold-500);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-text-on-navy: #ffffff;
  --color-text-on-gold: var(--navy-800); /* AA: navy on gold 5.8:1 */
  --color-bg: var(--canvas);
  --color-surface: var(--surface);
  --color-line: var(--line);

  /* ---- Gradients ---- */
  --grad-navy: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  --grad-gold: linear-gradient(135deg, var(--gold-500), var(--gold-600));

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 56px;

  /* ---- Radius ---- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(13, 36, 79, 0.06);
  --shadow-card:
    0 1px 2px rgba(13, 36, 79, 0.06), 0 8px 24px rgba(13, 36, 79, 0.06);
  --shadow-lg: 0 14px 38px rgba(11, 42, 91, 0.18);

  /* ---- Motion ---- */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Type ---- */
  --font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", Meiryo, "Malgun Gothic", "Apple SD Gothic Neo",
    "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Noto Sans", sans-serif;
  --font-display: Georgia, "Times New Roman", serif; /* kvcn.org headings */

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: clamp(26px, 3vw, 30px);
  --text-3xl: clamp(30px, 3.6vw, 36px);
  --text-4xl: clamp(36px, 6vw, 48px);

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-body: 1.6;
  --leading-cjk: 1.65;

  /* ---- Layout ---- */
  --tap-target-min: 44px;
  --container-max: 1080px;
}

/* CJK comfort: relaxed leading + no negative tracking for tagged blocks */
:lang(ja),
:lang(ko),
:lang(zh-TW),
:lang(zh) {
  line-height: var(--leading-cjk);
  letter-spacing: 0;
}

/* Dark theme — re-points semantic aliases only */
[data-theme="dark"] {
  --color-primary: #4f86c6;
  --color-accent: var(--gold-500);
  --color-text: #e7edf6;
  --color-text-muted: #9fb0c8;
  --color-bg: #0a1426;
  --color-surface: #111c33;
  --color-line: rgba(255, 255, 255, 0.1);
}