/**
 * ==============================================================================
 *  BLOQUE 1 - DESIGN SYSTEM & THEME VARIABLES
 * ==============================================================================
 *  All design tokens, colors, typography, radii, shadows, and spacings are 
 *  defined here using the '--b1-' prefix.
 *  You can customize the whole look & feel easily by editing the values below!
 * ==============================================================================
 */

:root {
  /* ── 1. BRAND COLORS (ELECTRIC CORAL & GASTRONOMIC APPETITE PALETTE) ──── */
  --b1-color-primary: #FF5030;             /* Vibrant Electric Coral */
  --b1-color-primary-hover: #E03A1B;       /* Deep Electric Coral on tap */
  --b1-color-primary-dark: #C83014;        /* Dark Coral for active borders */
  --b1-color-primary-light: #FFF0ED;       /* Soft Coral blush for chips */
  --b1-color-primary-glow: rgba(255, 80, 48, 0.28); /* Button glow shadow */
  --b1-color-primary-gradient: linear-gradient(135deg, #FF5030 0%, #FF7A5C 100%);
  --b1-color-hero-gradient: linear-gradient(135deg, #FF5030 0%, #FF6E52 100%);
  --b1-color-accent: #F59E0B;              /* Golden Honey / Urgency Amber */
  --b1-color-accent-emerald: #10B981;      /* Fresh Mint / Success Emerald */

  /* ── 2. NEUTRAL & SURFACE COLORS ─────────────────────────────────────────── */
  --b1-color-bg: #FAF8F5;                  /* Warm table linen / Cozy cream background */
  --b1-color-surface: #FFFFFF;             /* Crisp clean surface for cards & modals */
  --b1-color-surface-subtle: #F5F3EF;      /* Subtle warm background for inputs */
  --b1-color-border: #E8E4DD;              /* Soft warm border */
  --b1-color-border-light: #F0EDE6;        /* Soft separator lines */
  --b1-color-overlay: rgba(15, 23, 42, 0.6); /* Backdrop for modals & bottom sheets */

  /* ── 3. TEXT & TYPOGRAPHY COLORS ─────────────────────────────────────────── */
  --b1-color-text-main: #1E1B18;           /* High emphasis warm espresso titles & price */
  --b1-color-text-body: #4A453E;           /* Standard readable description text */
  --b1-color-text-muted: #78716C;          /* Medium-high emphasis warm caption */
  --b1-color-text-inverse: #FFFFFF;        /* White text for action buttons */
  --b1-color-text-price: #FF5030;          /* Appetizing highlight item price */
  --b1-color-success: #10B981;             /* Success emerald for free shipping & add-to-cart */
  --b1-color-danger: #EF4444;              /* Trash & alert red */

  /* ── 4. TYPOGRAPHY SIZES & WEIGHTS ───────────────────────────────────────── */
  --b1-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --b1-font-size-xs: 0.75rem;              /* 12px */
  --b1-font-size-sm: 0.875rem;             /* 14px */
  --b1-font-size-base: 1rem;               /* 16px */
  --b1-font-size-lg: 1.125rem;             /* 18px */
  --b1-font-size-xl: 1.25rem;              /* 20px */
  --b1-font-size-2xl: 1.5rem;              /* 24px */

  --b1-font-weight-regular: 400;
  --b1-font-weight-medium: 500;
  --b1-font-weight-semibold: 600;
  --b1-font-weight-bold: 700;
  --b1-font-weight-heavy: 800;

  /* ── 5. BORDER RADII (MODERN ROUNDED APP STYLE) ───────────────────────────── */
  --b1-radius-sm: 8px;
  --b1-radius-md: 14px;
  --b1-radius-lg: 20px;                    /* Standard food card radius */
  --b1-radius-xl: 26px;                    /* Bottom sheet top corners */
  --b1-radius-pill: 9999px;                /* Fully rounded badges, buttons, chips */

  /* ── 6. SHADOWS & ELEVATION ──────────────────────────────────────────────── */
  --b1-shadow-xs: 0 1px 3px rgba(30, 27, 24, 0.04);
  --b1-shadow-sm: 0 4px 12px rgba(30, 27, 24, 0.05);
  --b1-shadow-card: 0 8px 24px rgba(30, 27, 24, 0.06);
  --b1-shadow-card-hover: 0 12px 30px rgba(255, 80, 48, 0.16);
  --b1-shadow-button: 0 6px 18px rgba(255, 80, 48, 0.35);
  --b1-shadow-bottom-bar: 0 -8px 28px rgba(30, 27, 24, 0.08);
  --b1-shadow-sheet: 0 -12px 36px rgba(15, 23, 42, 0.18);

  /* ── 7. SPACING & SIZING ─────────────────────────────────────────────────── */
  --b1-space-2: 0.5rem;                    /* 8px */
  --b1-space-3: 0.75rem;                   /* 12px */
  --b1-space-4: 1rem;                      /* 16px */
  --b1-space-5: 1.25rem;                   /* 20px */
  --b1-space-6: 1.5rem;                    /* 24px */
  --b1-space-8: 2rem;                      /* 32px */
  --b1-max-width-app: 480px;               /* Centered mobile-app frame width */
  --b1-bottom-bar-height: 80px;            /* Bottom navigation clearance */

  /* ── 8. ANIMATION & TRANSITIONS ──────────────────────────────────────────── */
  --b1-transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --b1-transition-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --b1-transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── DARK MODE TOKENS (GASTRO DARK CHARCOAL & AMBER EMBER) ────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  /* ── 1. BRAND COLORS (ELECTRIC CORAL & WARM AMBER) ───────────────────────── */
  --b1-color-primary: #FF5E3A;             /* Vibrant Warm Coral Brasa */
  --b1-color-primary-hover: #E54522;       /* Deep Ember Coral */
  --b1-color-primary-dark: #FF7555;        /* Lightened Coral for borders/accents */
  --b1-color-primary-light: rgba(255, 94, 58, 0.16); /* Warm Coral blush */
  --b1-color-primary-glow: rgba(255, 94, 58, 0.35); /* Button warm glow */
  --b1-color-primary-gradient: linear-gradient(135deg, #FF5E3A 0%, #FF7E5F 100%);
  --b1-color-hero-gradient: linear-gradient(135deg, #FF5E3A 0%, #FF704D 100%);
  --b1-color-accent: #F59E0B;              /* Golden Honey / Warm Amber */
  --b1-color-accent-emerald: #10B981;      /* Fresh Mint / Success Emerald */

  /* ── 2. DARK NEUTRAL & SURFACE COLORS (WARM CHARCOAL & GRAPHITE) ─────────── */
  --b1-color-bg: #121110;                  /* Deep warm charcoal background (horno / calidez gourmet) */
  --b1-color-surface: #1C1A17;             /* Elevated roasted graphite for cards & modals */
  --b1-color-surface-subtle: #262320;      /* Subtle smoky stone for inputs & inactive chips */
  --b1-color-border: #36302A;              /* Soft warm bronze border */
  --b1-color-border-light: #23201C;        /* Dark warm separators */
  --b1-color-overlay: rgba(0, 0, 0, 0.82); /* Deep dark overlay */

  /* ── 3. DARK TEXT COLORS (WARM IVORY & SOFT WHEAT) ────────────────────────── */
  --b1-color-text-main: #FDFBF7;           /* Warm ivory cream - high contrast without eye glare */
  --b1-color-text-body: #D6CEC5;           /* Soft wheat toast for descriptions */
  --b1-color-text-muted: #9E948A;          /* Warm latte for secondary captions */
  --b1-color-text-inverse: #121110;        /* Deep charcoal for inverse text */
  --b1-color-text-price: #FF6A48;          /* Appetizing warm coral price */
  --b1-color-success: #10B981;             /* Fresh emerald */
  --b1-color-danger: #EF4444;              /* Alert warm red */

  /* ── 4. SHADOWS & ELEVATION IN DARK MODE ─────────────────────────────────── */
  --b1-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.5);
  --b1-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.6);
  --b1-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.65);
  --b1-shadow-card-hover: 0 12px 30px rgba(255, 94, 58, 0.22);
  --b1-shadow-button: 0 6px 20px rgba(255, 94, 58, 0.4);
  --b1-shadow-bottom-bar: 0 -8px 28px rgba(0, 0, 0, 0.75);
  --b1-shadow-sheet: 0 -12px 36px rgba(0, 0, 0, 0.88);
}