/* =============================================
   tokens.css — Design System Variables
   ============================================= */

:root {
  /* Colores */
  --green:         #1A6B4A;
  --green-hover:   #145239;
  --green-mid:     #2D9E6B;
  --green-light:   #E8F5EF;
  --green-border:  #A8D5BC;
  --blue:          #1B4F8A;
  --blue-light:    #E8F0FB;
  --blue-border:   #A8C4E8;
  --amber:         #B45309;
  --amber-light:   #FEF3C7;
  --red:           #DC2626;
  --red-light:     #FEE2E2;
  --bg:            #F8F7F4;
  --bg-alt:        #F0EFE9;
  --bg-paper:      #F4EFE4;
  --surface:       #FFFFFF;
  --dark:          #1C1C1A;
  --text:          #1C1C1A;
  --text-muted:    #5C5C58;
  --text-faint:    #9C9C96;
  --text-inverse:  #FFFFFF;
  --text-inverse-muted: rgba(255,255,255,0.72);
  --border:        #DDE8E2;
  --border-light:  #E8E4DC;
  --green-dark:    #0B1A10;

  /* Easing */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);

  /* Tipografía */
  --font-display:  'Lora', Georgia, serif;
  --font-body:     'Plus Jakarta Sans', system-ui, sans-serif;

  /* Espaciado */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px; --s6: 24px;  --s8: 32px;  --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;
  --s28: 112px; --s32: 128px;

  /* Toggle */
  --toggle-track: #1C1C1A;
  --toggle-thumb: #ffffff;
  --toggle-track-active: var(--green);

  /* Radios */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-card: 0 2px 8px rgba(26,107,74,0.06);
}

/* =============================================
   DARK MODE
   ============================================= */
[data-theme="dark"] {
  --green:         #2CAF72;
  --green-hover:   #229060;
  --green-mid:     #4BD68A;
  --green-light:   #0A1C11;
  --green-border:  #1A3826;
  --blue:          #6BA3E8;
  --blue-light:    #0A1522;
  --blue-border:   #162338;
  --amber:         #F0A030;
  --amber-light:   #1A1205;
  --red:           #F87171;
  --red-light:     #1E0808;
  --bg:            #0F1410;
  --bg-alt:        #141C16;
  --bg-paper:      #111A0F;
  --green-dark:    #060E08;
  --surface:       #1C2620;
  --dark:          #080D09;
  --text:          #E6EDE7;
  --text-muted:    #9EB0A4;
  --text-faint:    #617A6E;
  --text-inverse:  #0F1410;
  --text-inverse-muted: rgba(15,20,16,0.75);
  --border:        #253A2D;
  --border-light:  #1B2820;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.4);

  --toggle-track: var(--green);
  --toggle-thumb: #0F1410;
}