/* =========================================================================
   The Centre Rogue Valley — design tokens
   =========================================================================
   Palette derived from the logo (purple #8c52ff + red #fd0002, black ink on
   white). Ramps are generated at fixed lightness steps so every "600" shade
   clears WCAG AA (4.5:1) for white text on a solid background, and every
   "700" clears it for small text on white — see the 500 vs 600 note below.

   STATUS: not yet linked into any template. This is the foundation only —
   nothing in the live app changes until this (and components.css) get
   wired into templates/base.html, templates/portal/base.html and
   templates/shop/base.html, and app.css's existing --accent/--danger
   consumers get pointed at these new names (or these names replace them).
   ========================================================================= */

:root{
  /* ---- primitive ramps ---- */
  --purple-50:#f2ecfe;  --purple-100:#e5d8fd; --purple-200:#cab1fb; --purple-300:#a981f8;
  --purple-400:#8242ff; --purple-500:#8c52ff; /* true logo purple — decorative/large fills only */
  --purple-600:#7129ff; /* AA-safe for white text on this bg (6.06:1) — default interactive shade */
  --purple-700:#5600ff; --purple-800:#4800d7; --purple-900:#3a00ae;

  --red-50:#feecec;  --red-100:#fdd8d9; --red-200:#fbb1b2; --red-300:#f88182;
  --red-400:#ff4244; --red-500:#fd0002; /* true logo red — decorative/large fills only */
  --red-600:#d40002; /* AA-safe for white text on this bg (5.52:1) */
  --red-700:#ab0001; /* AA-safe for small text on white (7.66:1) — used for --danger */
  --red-800:#830001; --red-900:#5a0001;

  --green-50:#eaf3ef;  --green-500:#2f6f5e; --green-600:#255a4c;
  --amber-50:#fbf3e6;  --amber-500:#a86b16; --amber-600:#8a5711;
  --blue-50:#eaf1f8;   --blue-500:#3a6ea5;  --blue-600:#2f5a87;

  --neutral-0:#ffffff; --neutral-50:#f7f6f3; --neutral-100:#eeece6; --neutral-200:#e3e0da;
  --neutral-400:#a8a49b; --neutral-600:#6b6b6b; --neutral-900:#1f1f1f;

  /* ---- semantic tokens — what components actually reference ---- */
  --bg:var(--neutral-50); --card:var(--neutral-0); --line:var(--neutral-200);
  --fg:var(--neutral-900); --muted:var(--neutral-600);

  --brand:var(--purple-600);        /* primary interactive color: links, primary buttons, focus rings */
  --brand-bright:var(--purple-500); /* true logo purple — icon fills, decorative accents, no small text */
  --brand-tint:var(--purple-50);    /* wash for selected/hover backgrounds, badge fills */

  --warm:var(--red-600);            /* secondary brand accent, from the logo's red — sparing use */
  --warm-bright:var(--red-500);     /* true logo red — a ribbon, a highlight, the mark itself */
  --warm-tint:var(--red-50);

  --success:var(--green-500);  --success-tint:var(--green-50);
  --warning:var(--amber-500);  --warning-tint:var(--amber-50);
  --danger:var(--red-700);     --danger-tint:var(--red-50);
  --info:var(--blue-500);      --info-tint:var(--blue-50);

  /* ---- type ---- */
  --font-display:'Fraunces', Georgia, serif;   /* headings — warm, expressive serif */
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* unchanged — dense UI/tables stay sans */

  /* ---- spacing / radius / shadow (base scale) ---- */
  --space-unit:1rem;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(31,31,31,.08);
  --shadow-md:0 4px 16px rgba(31,31,31,.12);
}

/* ---- density by surface ----
   Same components, different breathing room per audience: desk is
   dense/data-heavy (staff at a counter), portal is phone-first and
   thumb-driven (members), shop is editorial and spacious (browsing art).
   Opt in with a class on <body> — not added to any template yet. */
body.desk{--space-unit:.75rem; --radius-md:8px;}
body.portal{--space-unit:1.1rem; --radius-md:12px;}
body.shop{--space-unit:1.4rem; --radius-md:14px;}

h1,h2,h3{font-family:var(--font-display)}