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

:root {
  /* Brand palette — warm orange / yellow / red */
  --color-primary:        #E8650A;   /* vibrant warm orange  */
  --color-primary-light:  #F07E2D;   /* medium orange        */
  --color-primary-pale:   #FFF3E8;   /* pale orange cream    */
  --color-accent:         #F5C518;   /* golden yellow        */
  --color-accent-dark:    #E0A800;   /* deep golden amber    */
  --color-success:        #27AE60;
  --color-warning:        #F39C12;
  --color-danger:         #E74C3C;
  --color-info:           #2980B9;

  /* Neutrals */
  --color-bg:             #FFF8F0;   /* warm cream background */
  --color-surface:        #FFFFFF;   /* card surface          */
  --color-border:         #FFD4A3;   /* warm orange border    */
  --color-text:           #2D1A0E;   /* warm near-black text  */
  --color-text-secondary: #8B4A1A;   /* warm brown text       */
  --color-text-muted:     #C8956A;   /* muted warm text       */
  --color-overlay:        rgba(232, 101, 10, 0.7);

  /* 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 */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(232,101,10,.10), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:  0 10px 30px rgba(232,101,10,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:  0 20px 50px rgba(232,101,10,.15);

  /* 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;
}