/* ═══════════════════════════════════════════════════════════════════════════
   variables.css — ReiDefine / ReiSpace brand palette
   SINGLE SOURCE OF TRUTH: Edit this file to change colors site-wide.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand palette ─────────────────────────────────────────────────────── */
  --color-primary:        #0C7E66; /* Rei Teal    — wordmark, headings, buttons  */
  --color-secondary:      #0A4F3E; /* Deep Teal   — dark sections, hover, bg     */
  --color-support:        #1E6660; /* Hand Teal   — mid-tone fills, icons        */
  --color-accent:         #B8923A; /* Rei Gold    — icons, highlights, CTAs      */
  --color-accent-muted:   #856A3A; /* Tagline Gold — small text, fine detail. AA 5.09:1 vs blanco */
  --color-neutral-light:  #F7F7F5; /* Off-White   — soft page background         */
  --color-neutral-dark:   #1F2933; /* Charcoal    — body text on light bg        */

  /* ── Semantic aliases ──────────────────────────────────────────────────── */
  --color-bg:             #FFFFFF;
  --color-bg-soft:        #F7F7F5;
  --color-bg-dark:        #0A4F3E;
  --color-text:           #1F2933;
  --color-text-muted:     #1E6660;
  /* Texto claro = off-white, nunca blanco puro (evita halation). Fondos SÍ pueden ser #FFFFFF. */
  --color-text-on-dark:   #F7F7F5;
  --color-border:         rgba(12, 126, 102, 0.20);
  --color-border-strong:  #0C7E66;
  --color-border-input:   #8E8F92; /* AA 3.23:1 vs blanco (UI component, WCAG 1.4.11) — antes neutral-200 (#E5E7EB), 1.24:1. Mismo tono, más oscuro */

  /* ── CTA / Button palette ──────────────────────────────────────────────── */
  --color-btn-primary-bg:           #0C7E66;
  --color-btn-primary-text:         #F7F7F5; /* AA 4.67:1 vs primary */
  --color-btn-primary-hover:        #B8923A;
  --color-btn-secondary-bg:         transparent;
  --color-btn-secondary-border:     #0C7E66;
  --color-btn-secondary-text:       #0C7E66;
  --color-btn-secondary-hover:      #0C7E66;
  --color-btn-secondary-text-hover: #FFFFFF;

  /* ── Phosphor icon defaults ────────────────────────────────────────────── */
  --color-icon-brand:   #0C7E66;
  --color-icon-accent:  #B8923A;
  --color-icon-ui:      currentColor;

  /* ── Extended utility: primary tints ───────────────────────────────────── */
  --color-primary-light:   rgba(12, 126, 102, 0.10); /* soft teal background   */
  --color-primary-glow:    rgba(12, 126, 102, 0.30); /* badge bg, glow rings   */
  --color-primary-focus:   rgba(12, 126, 102, 0.12); /* focus ring             */
  --color-primary-on-dark: #5BB89A;                  /* teal links on dark bg  */
  --color-primary-on-dark-hi: #74C3A9;               /* AA 4.60:1 vs dark-teal — cookie-banner__policy-link (primary-on-dark no llega a 4.5:1 ahí) */
  --color-accent-on-dark:  #DBB86E;                  /* gold text on dark bg — AA 5.04:1 vs dark-teal */
  --color-primary-on-blueteal: #09622E;              /* AA 4.64:1 vs --bg-section-blueteal — infra-item__value en platform-comingsoon */
  --color-primary-muted:   #0B7861;                  /* AA 4.87:1 vs bg-teal-wash — footer-newsletter__desc, footer__newsletter-privacy (opacity sola no llega a 4.5:1 ahí) */

  /* ── Neutral scale ─────────────────────────────────────────────────────── */
  --color-neutral-100:  #F3F4F6;
  --color-neutral-200:  #E5E7EB;
  --color-neutral-400:  #9CA3AF;
  --color-neutral-600:  #4B5563;
  --color-text-faint:   #6B7686; /* faint text on white — AA 4.60:1. Reemplaza usos de neutral-400 como texto */

  /* ── Status colors ─────────────────────────────────────────────────────── */
  --color-red:       #DC2626;
  --color-info:      #1D4ED8;
  --color-info-bg:   #EFF6FF;
  --color-info-text: #1E40AF;

  /* ── Emergency / crisis palette ────────────────────────────────────────── */
  --bg-emergency:    #7F1D1D; /* HelpNow bar — AA 6.9:1 con --text-emergency  */
  --text-emergency:  #FECACA;
  --icon-emergency:  #FCA5A5;

  /* ── Overlay / shadow ──────────────────────────────────────────────────── */
  --color-overlay:     rgba(0, 0, 0, 0.50);
  --color-shadow-dark: rgba(0, 0, 0, 0.30);
  --color-scrim-dark:  rgba(0, 18, 14, 0.85); /* photo scrim — carousel captions, image overlays */

  /* ── White transparency scale (for elements on dark backgrounds) ───────── */
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-white-80: rgba(255, 255, 255, 0.80);
  --color-white-75: rgba(255, 255, 255, 0.75);
  --color-white-70: rgba(255, 255, 255, 0.70);
  --color-white-65: rgba(255, 255, 255, 0.67); /* subido de 0.65 a 0.67 (AA 4.62:1 vs .tech-card__desc, antes 4.44:1) — nombre queda desactualizado a propósito, cambiar el nombre hubiera tocado los otros 4 usos sin necesidad */
  --color-white-60: rgba(255, 255, 255, 0.60);
  --color-white-45: rgba(255, 255, 255, 0.45);
  --color-white-40: rgba(255, 255, 255, 0.40);
  --color-white-25: rgba(255, 255, 255, 0.25);
  --color-white-20: rgba(255, 255, 255, 0.20);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-12: rgba(255, 255, 255, 0.12);
  --color-white-10: rgba(255, 255, 255, 0.10);
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-06: rgba(255, 255, 255, 0.06);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12px — labels, captions  */
  --text-sm:   0.875rem;   /* 14px — small body, nav   */
  --text-base: 1rem;       /* 16px — body default      */
  --text-lg:   1.125rem;   /* 18px — lead text         */
  --text-xl:   1.25rem;    /* 20px — small headings    */
  --text-2xl:  1.5rem;     /* 24px — h3                */
  --text-3xl:  1.875rem;   /* 30px — h2                */
  --text-4xl:  2.25rem;    /* 36px — h1 section        */
  --text-5xl:  3rem;       /* 48px — hero h1           */

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ── Background system ─────────────────────────────────────────────────── */

  /* Light backgrounds */
  --bg-white:        #FFFFFF;   /* Pure white — default page bg              */
  --bg-offwhite:     #F7F7F5;   /* Off-White — alternating sections          */
  --bg-teal-wash:    #EBF5F2;   /* Very light teal — subtle brand tint       */
  --bg-gold-wash:    #F8F3EA;   /* Very light gold — warm accent sections    */
  --bg-founder:      #F3E9D4;   /* legacy — sin usos activos (era el fondo de .sectors-split, migrado a --bg-gold-wash) */
  --bg-coral-wash:      #FAEEE9;
  --bg-lavender-wash:   #F0EBF8;
  --bg-solar-wash:      #FDF5E0;
  --bg-indigo-wash:     #EAF0FB; /* legacy — alias de --color-indigo-light; orphaned tras migración portal. Sin usos activos */
  --bg-blue-teal-wash:  #DFE7E9;
  --bg-section-blueteal: #BFCED4; /* 70% blanco / 30% --color-blue-teal — Enterprise Readiness en platform/platform-comingsoon */
  --bg-olive-wash:      #EDF0E9;
  --bg-brown-wash:      #EDE9E1;

  /* Mid backgrounds */
  --bg-teal-light:   #C8E4DC;   /* Light teal — highlight blocks, cards      */
  --bg-teal-mid:     #1E6660;   /* Hand Teal — support sections              */
  --bg-charcoal:     #1F2933;   /* Charcoal — dark sections, footer alt      */

  /* Dark backgrounds */
  --bg-dark-teal:    #0A4F3E;   /* Deep Teal — hero, dark CTAs               */
  --bg-black:        #111827;   /* Near-black — maximum contrast sections    */

  /* Semantic section backgrounds */
  --bg-section-default: var(--bg-white);
  --bg-section-alt:     var(--bg-offwhite);
  --bg-section-brand:   var(--bg-teal-wash);
  --bg-section-warm:    var(--bg-gold-wash);
  --bg-section-dark:    var(--bg-dark-teal);
  --bg-section-darker:  var(--bg-charcoal);
  --bg-hero:            var(--bg-dark-teal);

  /*
   * ── Identity hero backgrounds (deep tones per page family) ─────────────
   *
   * Esta paleta extendida por audiencia (coral, solar, lavender, indigo, y el
   * dorado pendiente de confirmar) es un sistema funcional del producto web —
   * distinto de la paleta cromática oficial del manual de marca impreso, que
   * rige identidad corporativa e impresos. Esta distinción fue confirmada
   * explícitamente por Hugo.
   */
  --bg-hero-coral:      #7A2E14; /* legacy — portal-coral migrado a brown; sin usos activos tras migración portal. 8.79:1 vs off-white */
  --bg-hero-lavender:   #3D2A5C; /* community, for-individuals (legacy cascade) — 11.62:1 */
  --bg-hero-gold:       #5C3E10; /* individuals, community (gold cascade) — warm-brown, 9.10:1 vs off-white */
  --bg-hero-indigo:     #1F2C66; /* legacy — platform/employers migrado a --bg-hero-blue-teal; sin usos activos. 12.16:1 vs off-white */
  --bg-hero-blue-teal:  #1F4C5A; /* organizations (platform, employers) — 8.75:1 vs off-white */
  --bg-hero-olive:      #404830; /* elder-support — 8.94:1 vs off-white */
  --bg-hero-brown:      #5A4827; /* therapists — 8.19:1 vs off-white */

  /* Card backgrounds */
  --bg-card-default: #FFFFFF;
  --bg-card-teal:    #EBF5F2;
  --bg-card-gold:    #F8F3EA;
  --bg-card-dark:    #0A4F3E;

  /* ── Text on each background ───────────────────────────────────────────── */

  /* Light backgrounds → dark text */
  --text-on-white:      #1F2933;
  --text-on-offwhite:   #1F2933;
  --text-on-teal-wash:  #0A4F3E;
  --text-on-gold-wash:  #1F2933;
  --text-on-teal-light: #0A4F3E;

  /* Dark backgrounds → light text */
  --text-on-teal-mid:  #F7F7F5;
  --text-on-dark-teal: #F7F7F5;
  --text-on-charcoal:  #F7F7F5;
  --text-on-black:     #F7F7F5;

  /* ============================================
     EXTENDED ACCENT PALETTE
     Complementary vivid colors for highlights,
     badges, tags, and accent UI elements.
     Use sparingly alongside the brand palette.
     ============================================ */

  --color-coral:          #E05C3A;
  --color-coral-dark:     #B8431F;

  --color-lavender:       #7B5EA7;
  --color-lavender-light: #F0EBF8;
  --color-lavender-dark:  #5C3F88;

  --color-solar:          #E8B84B; /* 1 uso: hn-card--solar border */
  --color-solar-light:    #FDF5E0; /* alias de --bg-solar-wash; conservar */
  --color-solar-dark:     #8F6815; /* AA 5.05:1 vs blanco, 4.64:1 vs solar-wash */

  --color-indigo:         #3D56B2;
  --color-indigo-light:   #EAF0FB;

  --color-blue-teal:      #285C6E; /* AA 7.38:1 vs white, 6.88:1 vs off-white, 5.88:1 vs blue-teal-wash */

  --color-brown-dark:     #785F34; /* AA 4.98:1 vs brown-wash, 5.62:1 vs off-white */
  --color-accent-dark:    #7D6327; /* AA 5.15:1 vs gold-wash, 5.70:1 vs white */

  /* Elder Support — audiencia propia (Sección 8 de design-system.md), migrada
     de --color-solar (SOLAR era compartido con contenido youth-facing de
     home.php, ver --color-solar/--bg-solar-wash más arriba — esos NO se
     tocan, siguen siendo del HelpNow youth). --color-olive es el tono base
     documentado (#8A9A6A); --color-olive-dark es un derivado nuevo, NO
     documentado en design-system.md (el doc solo da base/hero/wash, sin
     variante para eyebrow/label sobre fondo claro) — mismo criterio que ya
     existía para brown-dark/solar-dark/accent-dark: la base sola no pasa AA
     contra blanco (--color-olive solo, #8A9A6A, da 3.04:1, insuficiente),
     así que se oscurece manteniendo el mismo matiz hasta pasar AA. */
  --color-olive:          #8A9A6A; /* base documentada — NO usar como texto sobre blanco/off-white, ver --color-olive-dark */
  --color-olive-dark:     #5C6B42; /* derivado — AA 5.77:1 vs blanco, 5.01:1 vs --bg-olive-wash */

  /* Semantic use suggestions: */
  /* --color-coral    → alerts, urgency, energy, crisis-adjacent      */
  /* --color-lavender → community, individuals, spirituality, 2SLGBTQIA+ */
  /* --color-solar    → optimism, youth, warmth, Kids Help Phone (home.php) */
  /* --color-olive    → elder support, calm, grounded, mature audiences */
  /* --color-indigo   → technology, platform, enterprise, data        */

  /* ── Card system tokens ─────────────────────────────── */
  --card-radius:        var(--radius-xl);
  --card-padding:       var(--space-6);
  --card-shadow:        none;
  --card-shadow-hover:  var(--shadow-md);
  --card-transition:    transform 0.2s ease, box-shadow 0.2s ease;
  --card-hover-lift:    translateY(-3px);

  /* Variantes semánticas */
  --card-bg-default:    var(--clr-white);
  --card-bg-teal:       var(--bg-teal-wash);
  --card-bg-gold:       var(--bg-gold-wash);
  --card-bg-blue-teal:  var(--bg-blue-teal-wash);
  --card-bg-brown:      var(--bg-brown-wash);
  --card-border:        1px solid var(--clr-gray-200);
  --card-border-accent: 1px solid var(--color-primary);

}