/* ============================================================
   DESIGN TOKENS — El Eden PWA
   Pulpas y Frutas El Eden
   ============================================================ */

:root {
  /* ──────────────────────────────────────────────────────────
     Brand palette — derived from the El Edén · Pulpas y Frutas
     logo (warm orange, natural green, watermelon red, golden
     yellow). Used sparingly so the UI stays fresh, not saturated.
     ────────────────────────────────────────────────────────── */

  /* Primary — warm orange (logo banner / "naranja cálido") */
  --color-primary:        #E8650A;   /* vibrant warm orange  */
  --color-primary-light:  #F57C00;   /* logo orange          */
  --color-primary-pale:   #FFF3E8;   /* pale orange cream    */

  /* Accent — golden yellow (kiwi / maracuyá highlights) */
  --color-accent:         #FBC02D;   /* logo bright yellow   */
  --color-accent-dark:    #F5A800;   /* deep golden amber    */
  --color-accent-pale:    #FFF8E1;   /* pale yellow cream    */

  /* Brand secondary — natural green (leaves / arcs around logo) */
  --color-brand-green:        #4CAF50;   /* logo natural green */
  --color-brand-green-dark:   #388E3C;   /* deep leaf green    */
  --color-brand-green-pale:   #E8F5E9;   /* pale mint cream    */

  /* Brand secondary — watermelon red (sandía quadrant) */
  --color-brand-red:          #E53935;   /* logo watermelon red */
  --color-brand-red-dark:     #C62828;   /* deep red            */
  --color-brand-red-pale:     #FFEBEE;   /* pale rose cream     */

  /* Semantic — aligned with brand palette */
  --color-success:        #4CAF50;   /* brand green     */
  --color-success-pale:   #E8F5E9;
  --color-warning:        #F5A800;   /* deep amber      */
  --color-danger:         #E53935;   /* watermelon red  */
  --color-info:           #2980B9;

  /* Neutrals — warm cream base, softer/neutral border so the
     accent colors carry the visual weight */
  --color-bg:             #FFFBF5;   /* very soft cream bg    */
  --color-surface:        #FFFFFF;   /* card surface          */
  --color-border:         #F1E4D0;   /* soft warm cream border*/
  --color-border-strong:  #E6D3B8;   /* stronger border       */
  --color-text:           #2A1A0E;   /* warm near-black text  */
  --color-text-secondary: #6E4A28;   /* warm brown text       */
  --color-text-muted:     #B89878;   /* muted warm text       */
  --color-overlay:        rgba(45, 26, 14, 0.55);

  /* Typography */
  --font-family:     'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs:    0.75rem;    /*  12px */
  --font-size-sm:    0.875rem;   /*  14px */
  --font-size-base:  1rem;       /*  16px */
  --font-size-md:    1.125rem;   /*  18px */
  --font-size-lg:    1.25rem;    /*  20px */
  --font-size-xl:    1.5rem;     /*  24px */
  --font-size-2xl:   1.875rem;   /*  30px */
  --font-size-3xl:   2.25rem;    /*  36px */
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* Spacing scale */
  --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;

  /* Radius */
  --radius-sm:    0.375rem;
  --radius-md:    0.75rem;
  --radius-lg:    1.25rem;
  --radius-xl:    1.75rem;
  --radius-full:  9999px;

  /* Shadows — warm neutral so brand accents stand out */
  --shadow-sm:  0 1px 3px rgba(45,26,14,.06), 0 1px 2px rgba(45,26,14,.04);
  --shadow-md:  0 4px 12px rgba(45,26,14,.08), 0 2px 4px rgba(45,26,14,.05);
  --shadow-lg:  0 10px 30px rgba(45,26,14,.10), 0 4px 8px rgba(45,26,14,.06);
  --shadow-xl:  0 20px 50px rgba(45,26,14,.14);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Z-index scale */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
  --z-top:     400;

  /* Layout */
  --max-width: 480px;
  --nav-height: 64px;
}