/* ============================================================
   Claudia Arias Escobar — Color tokens
   Paleta: verdes de bosque + dorado cálido + crema neutro.
   ============================================================ */

:root {
  /* ── Brand greens ── */
  --cae-forest:        #2C4A3E;  /* Verde Bosque — primary brand color */
  --cae-forest-mid:    #3D6B5A;  /* Verde Medio — secondary surface / text on cream */
  --cae-sage:          #7CB99A;  /* Salvia — light green accent, alt backgrounds */

  /* ── Gold ── */
  --cae-gold:          #D4A853;  /* Dorado Cálido — accent, CTAs, rules */
  --cae-gold-light:    #E8C97A;  /* Dorado claro — hover / highlight */

  /* ── Neutrals ── */
  --cae-cream:         #FAF7F0;  /* Crema — primary light background */
  --cae-cream-deep:    #F0EBE0;  /* Crema profundo — alternating section bg */
  --cae-charcoal:      #1A1A1A;  /* Carbón — text, monochrome logo */
  --cae-white:         #FEFEFE;  /* Blanco — cards, surfaces */

  /* ── Extended green tints (derived, for hovers / borders / fills) ── */
  --cae-forest-900:    #20382E;  /* deepest — pressed states on forest */
  --cae-forest-700:    #2C4A3E;  /* = forest */
  --cae-forest-500:    #3D6B5A;  /* = forest-mid */
  --cae-sage-200:      #C9E2D5;  /* very light sage — soft fills, do-states */
  --cae-sage-100:      #E8F5EE;  /* lightest sage tint — success / positive bg */

  /* ── Grays (UI scaffolding) ── */
  --cae-ink:           #1A1A1A;
  --cae-ink-soft:      #444444;  /* body copy on light */
  --cae-ink-mute:      #6B6B6B;  /* captions, meta */
  --cae-line:          rgba(0, 0, 0, 0.08);  /* hairline dividers on light */
  --cae-line-strong:   rgba(0, 0, 0, 0.14);
  --cae-line-light:    rgba(255, 255, 255, 0.12); /* dividers on forest */

  /* ── Semantic feedback ── */
  --cae-danger:        #C0392B;  /* error / "don't" */
  --cae-danger-bg:     #FDECEA;
  --cae-positive:      #2C4A3E;  /* success uses forest, not a new green */
  --cae-positive-bg:   #E8F5EE;

  /* ════ SEMANTIC ALIASES ════ */

  /* Surfaces */
  --surface-page:      var(--cae-cream);     /* default page background */
  --surface-page-alt:  var(--cae-cream-deep);/* alternating section */
  --surface-card:      var(--cae-white);     /* raised card */
  --surface-dark:      var(--cae-forest);    /* hero / inverse sections */
  --surface-dark-alt:  var(--cae-forest-mid);
  --surface-accent:    var(--cae-gold);      /* gold panels, CTAs strips */
  --surface-sage:      var(--cae-sage);      /* sage feature panels */

  /* Text */
  --text-strong:       var(--cae-forest);    /* headings on light */
  --text-body:         var(--cae-ink-soft);  /* body on light */
  --text-mute:         var(--cae-ink-mute);  /* captions / meta on light */
  --text-on-dark:      var(--cae-white);     /* headings on forest */
  --text-on-dark-soft: rgba(255, 255, 255, 0.72);
  --text-on-dark-mute: rgba(255, 255, 255, 0.45);
  --text-accent:       var(--cae-gold);      /* eyebrows, links, accents */
  --text-sage:         var(--cae-sage);      /* secondary accent on dark */

  /* Lines / borders */
  --border-hairline:   var(--cae-line);
  --border-on-dark:    var(--cae-line-light);
}