/**
 * TerpTrainer UI Color Tokens
 * ============================================================
 * Source of truth for ALL non-gameboard UI colors.
 * Covers: menus, modals, lobby, home screen, headers, forms.
 * Does NOT apply to the gameboard — see 00-tokens-base.css.
 *
 * Derived from flowTheme.ts (March 2026 pass).
 * Replaces conflicting rules in terptrainer-website.css.
 * ============================================================
 */

:root {

  /* ── Backgrounds ─────────────────────────────────────────── */

  /* Full-page radial gradient (applied to body / page wrapper) */
  --ui-bg: radial-gradient(ellipse at 35% 55%, #2a3438 0%, #1c2628 45%, #111a1c 100%);
  /* Solid fallback for backgrounds that can't use gradients */
  --ui-bg-solid: #1c2628;
  /* Panel / card surface */
  --ui-card-bg: linear-gradient(165deg, rgba(44,54,58,0.97) 0%, rgba(30,38,40,0.98) 100%);
  /* Input / textarea fill */
  --ui-input-bg: rgba(16,22,24,0.55);

  /* Subtle ambient glows (overlay on page bg, pointer-events: none) */
  --ui-glow-warm: radial-gradient(circle, rgba(200,122,106,0.09) 0%, transparent 60%);
  --ui-glow-cool: radial-gradient(circle, rgba(107,143,90,0.07) 0%, transparent 60%);


  /* ── Borders & Dividers ──────────────────────────────────── */

  /* Tan/parchment — primary panel borders */
  --ui-border:        rgba(202,182,154,0.22);
  --ui-border-dim:    rgba(202,182,154,0.08);
  /* Horizontal rule between sections */
  --ui-divider:       rgba(202,182,154,0.13);
  /* Input field border */
  --ui-input-border:  rgba(202,182,154,0.25);

  /* Raw tan values (for tints, backgrounds, etc.) */
  --ui-tan:           #CAB69A;
  --ui-tan-dark:      #8B7764;


  /* ── Typography ─────────────────────────────────────────── */

  /* Headings, card titles, player names */
  --ui-text-heading:  #F0EAE0;
  /* Body copy, descriptions */
  --ui-text-body:     rgba(235,225,210,0.88);
  /* Labels, helper text, placeholders */
  --ui-text-muted:    rgba(190,178,158,0.6);
  /* Disabled / ghost text */
  --ui-text-subtle:   rgba(190,178,158,0.38);


  /* ── Primary CTA — Rose / Raspberry ─────────────────────── */
  /* Used on: Start Match button, primary actions */

  --ui-rose:          #C4506A;
  --ui-rose-light:    #D06580;   /* hover state */
  --ui-rose-dim:      rgba(196,80,106,0.12);
  --ui-rose-border:   rgba(196,80,106,0.42);
  --ui-rose-shadow:   0 4px 18px rgba(196,80,106,0.28);


  /* ── Warm Accent — Peach / Orange ───────────────────────── */
  /* Used on: section labels (DECK, AI DIFFICULTY, LAN MULTIPLAYER),
              links ("sign up to save it"), icon accents */

  --ui-peach:         #F0A055;
  --ui-peach-light:   #F4B575;
  --ui-peach-dim:     rgba(240,160,85,0.1);
  --ui-peach-border:  rgba(240,160,85,0.32);


  /* ── Nature Accent — Sage Green ─────────────────────────── */
  /* Used on: leaf icons, cultivation/growth indicators */

  --ui-sage:          #6B8F5A;
  --ui-sage-light:    #85A870;
  --ui-sage-dim:      rgba(107,143,90,0.1);
  --ui-sage-border:   rgba(107,143,90,0.3);


  /* ── Teal ────────────────────────────────────────────────── */
  /* Used on: selected/active card state (Online button, LAN Multiplayer),
              Online mode globe icon */

  --ui-teal:          #4AAFA8;
  --ui-teal-dim:      rgba(74,175,168,0.1);
  --ui-teal-border:   rgba(74,175,168,0.3);


  /* ── Lavender-Gray ───────────────────────────────────────── */
  /* Used on: hover backgrounds, secondary buttons, unselected states */

  --ui-lavender:       #B8BDD0;
  --ui-lavender-dim:   rgba(184,189,208,0.08);
  --ui-lavender-border:rgba(184,189,208,0.22);


  /* ── Status Colors ───────────────────────────────────────── */

  --ui-error:          #E07070;
  --ui-error-dim:      rgba(224,112,112,0.08);
  --ui-error-border:   rgba(224,112,112,0.25);

  --ui-warning:        #D4A040;
  --ui-warning-dim:    rgba(212,160,64,0.08);
  --ui-warning-border: rgba(212,160,64,0.28);


  /* ── Shadows ─────────────────────────────────────────────── */

  /* Card / modal drop shadow */
  --ui-card-shadow: 0 28px 90px rgba(0,0,0,0.85), 0 4px 20px rgba(202,182,154,0.06);

}

/*
 * ── Quick reference ──────────────────────────────────────────
 *
 *   Page background:    var(--ui-bg)            #1c2628 base
 *   Panel surface:      var(--ui-card-bg)        dark charcoal gradient
 *   Panel border:       var(--ui-border)         tan rgba
 *   Headings:           var(--ui-text-heading)   #F0EAE0
 *   Body text:          var(--ui-text-body)       cream rgba
 *   Section labels:     var(--ui-peach)           #F0A055
 *   Links / highlights: var(--ui-peach)           #F0A055
 *   Primary button:     var(--ui-rose)            #C4506A
 *   Active/selected:    var(--ui-teal)            #4AAFA8  (border)
 *   Hover bg:           var(--ui-lavender-dim)
 *   Error:              var(--ui-error)           #E07070
 *   Warning:            var(--ui-warning)         #D4A040
 *
 * ─────────────────────────────────────────────────────────── */