/**
 * Uprooted Academy — Design Token System
 * Single source of truth for brand colors, typography, spacing, and radius.
 * All page templates and component CSS should reference these variables.
 */
:root {
  /* ── Brand ─────────────────────────────────────── */
  --color-primary:       #196e63;
  --color-primary-dark:  #145a50;
  --color-primary-deeper:#0f6156;
  --color-primary-light: #e8f5f3;
  --color-primary-ring:  rgba(25, 110, 99, 0.18);

  /* ── Status / Semantic ──────────────────────────── */
  --color-success-text:   #3c763d;
  --color-success-bg:     #dff0d8;
  --color-success-border: #d0e9c6;

  --color-warning-text:   #8a6d3b;
  --color-warning-bg:     #fcf8e3;
  --color-warning-border: #faebcc;

  --color-danger-text:    #a94442;
  --color-danger-bg:      #f2dede;
  --color-danger-border:  #ebccd1;
  --color-danger-vivid:   #E24B4A;

  --color-info-text:      #31708f;
  --color-info-bg:        #d9edf7;
  --color-info-border:    #bce8f1;

  --color-purple-text:    #534ab7;
  --color-purple-bg:      #eeedfe;

  --color-amber-vivid:    #EF9F27;

  /* ── Neutrals ───────────────────────────────────── */
  --color-text:            #333333;
  --color-text-muted:      #676a6c;
  --color-text-subtle:     #999999;
  --color-text-placeholder:#aaaaaa;

  --color-bg-page:   #f3f3f4;
  --color-bg-card:   #ffffff;
  --color-bg-hover:  #f9fafb;
  --color-bg-subtle: #f5f5f5;

  --color-border:       #e7eaec;
  --color-border-light: #f0f0f0;
  --color-border-input: #e5e6e7;

  /* ── Typography ─────────────────────────────────── */
  --font-base: 'Jost', 'Segoe UI', sans-serif;

  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;

  /* ── Border Radius ──────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.20);

  /* ── Lucide icon baseline ───────────────────────── */
  --icon-xs:  12px;
  --icon-sm:  14px;
  --icon-md:  16px;
  --icon-lg:  20px;
  --icon-xl:  24px;
}

/* ── Global font reset ───────────────────────────────────────────────────── */
/*
 * Pin every page to Jost.  Low-specificity rule so intentional display-font
 * overrides (Alice on hero headings, Dela Gothic One on branded pills) still
 * win through normal cascade without needing !important.
 */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, td, th, label, span,
input, textarea, select, button,
.btn, .form-control {
  font-family: var(--font-base);
}