/* Globa — Paleta Cromática
 * Three greens from vivid to deep, plus warm neutrals.
 * Any color EXCEPT black may be used as a background.
 * Black is reserved for typography & high-hierarchy elements only.
 */
:root {
  /* ---- Brand greens (base) ---- */
  --globa-verde-vivo: #27BF82;   /* Verde Vivo  — primary, energetic */
  --globa-turquesa:   #01AB8E;   /* Turquesa    — secondary */
  --globa-verde-agua: #006C5C;   /* Verde Agua  — deep, grounding */

  /* ---- Warm neutrals (base) ---- */
  --globa-crema: #FDFBEF;        /* Crema — primary light surface */
  --globa-arena: #F2D8C3;        /* Arena — warm accent surface */
  --globa-negro: #0F0D0D;        /* Negro — type & max hierarchy (never a bg) */
  --globa-blanco: #FFFFFF;

  /* ---- Tint scale, derived from the greens (opacity-driven per brand) ---- */
  --globa-verde-vivo-90: color-mix(in srgb, var(--globa-verde-vivo) 90%, transparent);
  --globa-verde-vivo-60: color-mix(in srgb, var(--globa-verde-vivo) 60%, transparent);
  --globa-verde-vivo-30: color-mix(in srgb, var(--globa-verde-vivo) 30%, transparent);
  --globa-verde-vivo-12: color-mix(in srgb, var(--globa-verde-vivo) 12%, transparent);
  --globa-verde-agua-90: color-mix(in srgb, var(--globa-verde-agua) 90%, transparent);
  --globa-verde-agua-12: color-mix(in srgb, var(--globa-verde-agua) 12%, transparent);
  --globa-arena-50: color-mix(in srgb, var(--globa-arena) 50%, transparent);

  /* Warm off-white derived from crema for subtle layering */
  --globa-crema-shade: color-mix(in srgb, var(--globa-crema) 92%, var(--globa-arena));

  /* ================= SEMANTIC ALIASES ================= */

  /* Surfaces */
  --surface-page:     var(--globa-crema);       /* default page bg */
  --surface-raised:   var(--globa-blanco);      /* cards on crema */
  --surface-sunken:   var(--globa-crema-shade); /* wells, insets */
  --surface-warm:     var(--globa-arena);       /* warm feature bg */
  --surface-brand:    var(--globa-verde-vivo);  /* vivid feature bg */
  --surface-brand-deep: var(--globa-verde-agua);/* deep feature bg */
  --surface-invert:   var(--globa-negro);       /* dark feature bg */

  /* Text */
  --text-strong:  var(--globa-negro);           /* headings, high hierarchy */
  --text-body:    color-mix(in srgb, var(--globa-negro) 82%, var(--globa-crema)); /* body copy */
  --text-muted:   color-mix(in srgb, var(--globa-negro) 55%, var(--globa-crema)); /* captions */
  --text-on-brand:   var(--globa-crema);        /* text on green/dark bg */
  --text-on-brand-strong: var(--globa-blanco);
  --text-brand:   var(--globa-verde-agua);      /* green text on light */

  /* Interactive / accents */
  --accent:          var(--globa-verde-vivo);
  --accent-hover:    var(--globa-turquesa);      /* darker green on hover */
  --accent-press:    var(--globa-verde-agua);
  --accent-contrast: var(--globa-negro);         /* text/icon on vivid green */

  /* Lines & dividers */
  --border-subtle:  color-mix(in srgb, var(--globa-negro) 12%, transparent);
  --border-strong:  color-mix(in srgb, var(--globa-negro) 22%, transparent);
  --border-brand:   var(--globa-verde-agua);
  --border-on-brand: color-mix(in srgb, var(--globa-crema) 34%, transparent);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--globa-verde-agua) 55%, transparent);

  /* Links */
  --link:       var(--globa-verde-agua);
  --link-hover: var(--globa-turquesa);
}