/* ============================================================
   Bioma — Design tokens (frontend-spec.md §1)
   Todo componente consume variables, nunca HEX crudos.
   Fondo SIEMPRE crema · verde oliva protagonista · dorado <=15%.
   ============================================================ */
:root {
  /* ===== FONDOS (siempre crema) ===== */
  --bg:              #F5F0E8;   /* crema principal — fondo base de TODA la interfaz */
  --bg-2:            #EDE7DB;   /* crema oscuro — cards, secciones secundarias */
  --border:          #E0D9CE;   /* crema borde — bordes, separadores, líneas 1px */

  /* ===== VERDE OLIVA (protagonista) ===== */
  --olive:           #6B7C4A;
  --olive-light:     #8FA06A;
  --olive-soft:      #C4D4A8;

  /* ===== DORADO (acento de marca, uso <=15%) ===== */
  --gold:            #B8963C;
  --gold-light:      #C9A84C;
  --gold-soft:       #E8D5A0;

  /* ===== TEXTO ===== */
  --text:            #2B2B26;
  --text-body:       #4A4A42;
  --text-muted:      #888880;
  --text-disabled:   #C5C0B0;

  /* ===== TEXTO SOBRE FONDOS DE COLOR ===== */
  --on-olive:        #F5F0E8;
  --on-gold:         #2B2B26;

  /* ===== SEMÁNTICOS ===== */
  --success:         #6B7C4A;
  --warning:         #B8963C;
  --danger:          #9A4A3C;   /* terracota apagado — SOLO destructivo */
  --overlay:         rgba(43,43,38,0.32);

  /* ===== TIPOGRAFÍA ===== */
  --font-display:    'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-ui:         'Montserrat', 'Inter', -apple-system, system-ui, sans-serif;

  --fs-display-xl:   40px;
  --fs-display-lg:   30px;
  --fs-display-md:   24px;
  --fs-display-sm:   20px;

  --fs-h:            17px;
  --fs-body:         15px;
  --fs-body-sm:      14px;
  --fs-btn:          13px;
  --fs-label:        11px;

  --w-display:       400;
  --w-display-med:   500;
  --w-body:          400;
  --w-med:           500;

  --lh-title:        1.2;
  --lh-body:         1.7;

  --ls-label:        3px;
  --ls-btn:          2px;

  /* ===== RADIOS ===== */
  --r-xs:            4px;
  --r-sm:            6px;
  --r-md:            12px;
  --r-lg:            16px;
  --r-pill:          999px;

  /* ===== SOMBRAS (sutiles, tinte oliva) ===== */
  --sh-none:         none;
  --sh-card:         0 2px 12px rgba(107,124,74,0.10);
  --sh-float:        0 6px 20px rgba(107,124,74,0.12);

  /* ===== ESPACIADOS (escala 4pt) ===== */
  --s-1:             4px;
  --s-2:             8px;
  --s-3:             12px;
  --s-4:             16px;
  --s-5:             20px;
  --s-6:             24px;
  --s-8:             32px;
  --s-10:            40px;
  --s-12:            48px;

  /* ===== LAYOUT ===== */
  --tabbar-h:        64px;
  --header-h:        56px;
  --gutter:          16px;
  --touch-min:       44px;

  --safe-top:        env(safe-area-inset-top);
  --safe-bottom:     env(safe-area-inset-bottom);

  /* ===== ÍCONOS SVG line ===== */
  --ic-size:         22px;
  --ic-stroke:       1.75;

  /* App shell (web, mobile-first máx 430px) */
  --app-max:         430px;
}