/* ============================================================
   Longevity Initiatives — Color tokens
   Source: official Brand Guide 2025 (uploads/longevity-brand-guide.html)
   Rule from the guide: Teal is the dominant brand color; Terracota is
   ONLY an accent, never dominant. Pizarra for premium/dark surfaces;
   Arena for warm academic surfaces; Blanco for clean light surfaces.
   ============================================================ */
:root {
  /* ── Brand primitives ───────────────────────────── */
  --teal:        #2D7D7D;  /* Pantone 5473 C — principal */
  --teal-light:  #3A9B9B;
  --teal-dark:   #1F5C5C;

  --terracota:       #E0936E;  /* accent only — updated lighter tone (was #C4714A) */
  --terracota-light: #EBAC8E;
  --terracota-dark:  #C7754F;
  --terracota-on-dark: #EBAC8E;  /* lighter terracota for text on pizarra/dark surfaces */

  --arena:       #E8DDD0;  /* warm neutral — surfaces, dividers */
  --arena-dark:  #D4C4B0;
  --arena-deep:  #A89880;

  --pizarra:        #2C3E50;  /* Pantone 296 C — dark/premium surface, ink */
  --pizarra-light:  #3E5468;
  --pizarra-deep:   #20303F;

  --blanco:      #FAFAF8;  /* warm white */
  --canvas:      #F4EFE8;  /* warm page background */

  /* Logo wordmark indigo (from the vector logo asset; reserved for the
     logo lockup — NOT a UI color per the guide's "no royal blue" rule) */
  --logo-indigo: #22417F;

  /* ── Semantic surfaces ──────────────────────────── */
  --surface-page:      var(--canvas);
  --surface-card:      var(--blanco);
  --surface-raised:    #FFFFFF;
  --surface-sunken:    var(--arena);
  --surface-dark:      var(--pizarra);
  --surface-dark-deep: var(--pizarra-deep);

  /* ── Semantic text ──────────────────────────────── */
  --text-strong:    var(--pizarra);
  --text-body:      rgba(44, 62, 80, 0.78);
  --text-muted:     rgba(44, 62, 80, 0.52);
  --text-faint:     rgba(44, 62, 80, 0.38);
  --text-on-dark:        var(--blanco);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.62);
  --text-on-dark-faint:  rgba(255, 255, 255, 0.34);
  --text-accent:    var(--terracota);
  --text-accent-on-dark: var(--terracota-on-dark);
  --text-brand:     var(--teal);
  --text-brand-on-dark: var(--teal-light);

  /* ── Borders & lines ────────────────────────────── */
  --border-soft:    var(--arena-dark);
  --border-hair:    rgba(44, 62, 80, 0.10);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  /* ── Status (derived from palette, kept subtle) ─── */
  --positive: #4A8C6F;
  --warning:  #C4954A;
  --critical: #B5503A;

  /* ── Brand gradient — footer bar on every document ─ */
  --grad-brand: linear-gradient(to right, var(--teal-dark), var(--teal-light) 55%, var(--terracota)); /* @kind color */
  --glow-teal:  radial-gradient(circle, rgba(45,125,125,0.22), transparent 60%); /* @kind color */
}