/* ==========================================================
   TOKENS DE DISEÑO — TuPos
   Aquí viven TODOS los colores, tamaños y sombras.
   Para cambiar la identidad visual solo edita este archivo.
   El tema se activa con <html data-theme="light|dark">.
   ========================================================== */

:root {
  /* ---- Marca (sacada del logo) ---- */
  --brand-50:  #effbe9;
  --brand-100: #d9f4c9;
  --brand-300: #a3e36b;
  --brand-400: #7ed63a;
  --brand-500: #3fae2a;
  --brand-600: #2a7f1f;
  --brand-700: #236b19;
  --brand-900: #0f3a12;
  --accent:    #14b8a6;

  /* ---- Tipografía y medidas ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --container: 1152px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ================= TEMA CLARO (por defecto) ================= */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:        #ffffff;
  --bg-alt:    #f5f9f3;
  --surface:   #ffffff;
  --surface-2: #f1f6ef;
  --text:      #14231a;
  --text-muted:#52645a;
  --border:    #dfe8df;

  --primary:       #2a7f1f;
  --primary-hover: #236b19;
  --on-primary:    #ffffff;
  --primary-soft:      #e6f6dc;
  --primary-soft-text: #1d5e15;
  --brand-name:    #2a7f1f;
  --link:          #2a7f1f;

  --hero-from: #effbe9;
  --band-bg:       #0f3a12;
  --on-band:       #ffffff;
  --on-band-muted: #bcd7bd;

  --wa:       #15803d;
  --wa-hover: #166534;

  --header-bg: rgb(255 255 255 / .86);
  --focus: #2a7f1f;

  --shadow-sm: 0 1px 2px rgb(16 32 20 / .06);
  --shadow-md: 0 10px 30px -12px rgb(16 32 20 / .2);
  --shadow-lg: 0 30px 70px -25px rgb(16 32 20 / .35);
}

/* ================= TEMA OSCURO ================= */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0b1410;
  --bg-alt:    #0f1b15;
  --surface:   #13221a;
  --surface-2: #182a20;
  --text:      #e8f2ea;
  --text-muted:#9bb0a3;
  --border:    #243a2d;

  --primary:       #5ccf3a;
  --primary-hover: #77de58;
  --on-primary:    #062009;
  --primary-soft:      #17331d;
  --primary-soft-text: #9be67a;
  --brand-name:    #7ed63a;
  --link:          #84dc5f;

  --hero-from: #10261a;
  --band-bg:       #112a1b;
  --on-band:       #f1f8f2;
  --on-band-muted: #9fb8a6;

  --wa:       #1fa653;
  --wa-hover: #27bd62;

  --header-bg: rgb(11 20 16 / .82);
  --focus: #84dc5f;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-md: 0 12px 32px -14px rgb(0 0 0 / .7);
  --shadow-lg: 0 30px 70px -25px rgb(0 0 0 / .8);
}