/* ===========================================================================
 * QCU Cooperative — Brand Tokens (v2.0 · 2026-05-28)
 * ---------------------------------------------------------------------------
 * Tier 1 primitives + Tier 2 semantic tokens + typography + radii + aliases.
 * Component classes are in brand-components.css.
 * Motion patterns are in brand-motion.css.
 * Tailwind cool→warm remap is in brand-overrides.css.
 *
 *   <link rel="stylesheet" href="/assets/css/brand-tokens.css">
 *
 * Full documentation:           docs/BRAND.md
 * Visual reference (the spec):  docs/brand/qcu-coop-brand-sheet.html
 *
 * Operating principles:
 *   - 80% forest, 15% cream, 5% terracotta — never invert these ratios.
 *   - Cream is page-background only. Cards + inputs stay WHITE.
 *   - All grays are WARM. Cool grays clash on cream.
 *   - Never #000 — use --qcu-ink (#1F2A23).
 *   - Terracotta is a spice. One thing per screen, max.
 * ========================================================================= */

:root {
  /* =========================
   * TIER 1 — primitives
   * (raw hex; ONLY place hex codes live in the system)
   * ========================= */
  --qcu-forest:           #2D5F3F;
  --qcu-forest-deep:      #1F4A2E;
  --qcu-forest-tint:      #E5EFE8;

  --qcu-cream:            #FCF6EA;
  --qcu-cream-deep:       #F5EBD3;

  --qcu-terracotta:       #B85C38;
  --qcu-terracotta-tint:  #F5E1D6;

  --qcu-ink:              #1F2A23;
  --qcu-gray-warm:        #6B6450;
  --qcu-gray-light:       #B5A988;

  --qcu-border:           #E8DFC9;
  --qcu-white:            #FFFFFF;

  /* Reserved semantic (NOT brand) */
  --qcu-danger:           #B91C1C;   /* destructive only — confirm-delete, error toasts */
  --qcu-danger-deep:           #991919;   /* danger hover */
  --qcu-danger-tint:           #FCE4E4;   /* danger badge backgrounds */
  --qcu-terracotta-tint-hover: #EFD4C6;   /* tertiary button hover state */

  /* =========================
   * TIER 2 — semantic
   * (use these in components + pages)
   * ========================= */
  --qcu-bg-page:          var(--qcu-cream);
  --qcu-bg-surface:       var(--qcu-white);
  --qcu-bg-elevated:      var(--qcu-white);
  --qcu-bg-tinted:        var(--qcu-cream-deep);

  --qcu-text-primary:     var(--qcu-ink);
  --qcu-text-secondary:   var(--qcu-gray-warm);
  --qcu-text-disabled:    var(--qcu-gray-light);
  --qcu-text-inverse:     var(--qcu-cream);

  --qcu-border-subtle:    var(--qcu-border);
  --qcu-border-strong:    var(--qcu-forest);

  --qcu-action-primary:   var(--qcu-forest);
  --qcu-action-hover:     var(--qcu-forest-deep);
  --qcu-action-tint:      var(--qcu-forest-tint);

  --qcu-accent:           var(--qcu-terracotta);
  --qcu-accent-tint:      var(--qcu-terracotta-tint);

  --qcu-success:          var(--qcu-forest);
  --qcu-warning:          var(--qcu-terracotta);
  /* --qcu-danger is Tier 1 only; semantic only, not brand */

  /* =========================
   * Typography
   * ========================= */
  --qcu-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --qcu-font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --qcu-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* =========================
   * Radii
   * ========================= */
  --qcu-r-sm: 6px;     /* small chips, tags */
  --qcu-r-md: 8px;     /* buttons, inputs */
  --qcu-r-lg: 12px;    /* cards */
  --qcu-r-xl: 14px;    /* hero cards, modals */
  --qcu-r-pill: 999px; /* pill-shape badges */
}

/* =========================
 * Backwards-compat aliases
 * (the brand-sheet HTML uses --forest, --cream etc. without --qcu- prefix.
 *  Keep these so legacy + new code both work.)
 * ========================= */
:root {
  --forest:           var(--qcu-forest);
  --forest-deep:      var(--qcu-forest-deep);
  --forest-tint:      var(--qcu-forest-tint);
  --cream:            var(--qcu-cream);
  --cream-deep:       var(--qcu-cream-deep);
  --terracotta:       var(--qcu-terracotta);
  --terracotta-tint:  var(--qcu-terracotta-tint);
  --ink:              var(--qcu-ink);
  --gray-warm:        var(--qcu-gray-warm);
  --gray-light:       var(--qcu-gray-light);
  --border:           var(--qcu-border);
}