/* ============================================================
   DESIGN TOKENS — All Points Tree Service 2026
   Paleta: Verde Bosque Profundo + Naranja Ámbar Brillante
   ============================================================ */

:root,
[data-theme='light'] {
  /* Superficies */
  --color-bg:              #f4f6f4;
  --color-surface:         #ffffff;
  --color-surface-2:       #eef2ee;
  --color-surface-offset:  #e4ebe4;
  --color-divider:         #d0dcd0;
  --color-border:          #b8ccb8;

  /* Texto */
  --color-text:            #111c12;
  --color-text-muted:      #4a5e4b;
  --color-text-faint:      #8fa48f;
  --color-text-inverse:    #ffffff;

  /* Verde Bosque Profundo (primario) — más oscuro y rico */
  --color-primary:         #1a5226;
  --color-primary-hover:   #13401c;
  --color-primary-active:  #0c2e12;
  --color-primary-light:   #c8e6cc;
  --color-primary-xl:      #e8f5e9;

  /* Naranja Ámbar BRILLANTE (acento / CTAs) — más llamativo */
  --color-accent:          #e8710a;
  --color-accent-hover:    #c75d06;
  --color-accent-light:    #fff3e0;

  /* Marrón corteza */
  --color-bark:            #6d3a1a;

  /* Fondo secciones oscuras */
  --color-dark-bg:         #0c1f0e;
  --color-dark-surface:    #122918;

  /* Tipografía fluida */
  --text-xs:    clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:    clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base:  clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:    clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:   clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:   clamp(2.5rem,   1rem    + 5vw,    5.5rem);

  /* Espaciado (base 4px) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --content-default: 1160px;
  --content-narrow:  720px;

  /* Bordes */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 4px  rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.11);
  --shadow-lg: 0 12px 44px rgba(0,0,0,0.15);

  /* Transición */
  --ease: 180ms cubic-bezier(0.16,1,0.3,1);

  /* Fuentes */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter',  'Helvetica Neue', sans-serif;
}

/* ===== MODO OSCURO ===== */
[data-theme='dark'] {
  --color-bg:             #0a1a0c;
  --color-surface:        #0e2012;
  --color-surface-2:      #132817;
  --color-surface-offset: #182e1c;
  --color-divider:        #1e3823;
  --color-border:         #264830;
  --color-text:           #ddeede;
  --color-text-muted:     #72a078;
  --color-text-faint:     #3e6645;
  --color-text-inverse:   #0a1a0c;
  --color-primary:        #4caf60;
  --color-primary-hover:  #3d9950;
  --color-primary-light:  #173d1e;
  --color-primary-xl:     #102914;
  --color-accent:         #ff8c2a;
  --color-accent-hover:   #e07520;
  --color-accent-light:   #2a1800;
  --color-bark:           #c98050;
  --color-dark-bg:        #040d05;
  --color-dark-surface:   #091409;
  --shadow-sm: 0 1px 4px  rgba(0,0,0,0.35);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 44px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #0a1a0c;
    --color-surface:        #0e2012;
    --color-surface-2:      #132817;
    --color-surface-offset: #182e1c;
    --color-divider:        #1e3823;
    --color-border:         #264830;
    --color-text:           #ddeede;
    --color-text-muted:     #72a078;
    --color-text-faint:     #3e6645;
    --color-primary:        #4caf60;
    --color-primary-hover:  #3d9950;
    --color-primary-light:  #173d1e;
    --color-primary-xl:     #102914;
    --color-accent:         #ff8c2a;
    --color-accent-hover:   #e07520;
    --color-bark:           #c98050;
  }
}