/* Design Tokens - Totana a la Carta */
/* Version: 1.0 */

:root {
  /* ========================================
     COLOR PALETTE
     ======================================== */

  /* Background Colors */
  --bg-primary: #FFFBF5;      /* Main background - warm white */
  --bg-secondary: #FFF8F0;    /* Cards, sections - soft cream */
  --bg-tertiary: #F5EDE4;     /* Alternate sections - light sand */
  --bg-elevated: #FFFFFF;     /* Elevated cards - pure white */

  /* Accent Colors */
  --accent-primary: #D35400;    /* CTAs, prices, highlights - burnt orange */
  --accent-secondary: #A04000;  /* Hover states - terracotta */
  --accent-tertiary: #DAA520;   /* Premium highlights - warm gold */
  --accent-light: #FFF3E6;      /* Light accent background */

  /* Text Colors */
  --text-primary: #2C1810;      /* Headings - dark brown */
  --text-secondary: #5D4E37;    /* Body text - warm gray */
  --text-muted: #8B7355;        /* Secondary info - light brown */
  --text-inverse: #FFFFFF;      /* Text on dark backgrounds */

  /* Semantic Colors */
  --success: #27AE60;           /* Open status, success messages */
  --success-light: #E8F5E9;     /* Success background */
  --error: #C0392B;             /* Closed status, errors */
  --error-light: #FFEBEE;       /* Error background */
  --warning: #F39C12;           /* Warning messages */
  --warning-light: #FFF8E1;     /* Warning background */
  --info: #3498DB;              /* Info messages */
  --info-light: #E3F2FD;        /* Info background */

  /* Border Colors */
  --border-light: #F0E6D9;      /* Light borders */
  --border-default: #E0D5C7;    /* Default borders */
  --border-dark: #C4B5A5;       /* Darker borders */

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ========================================
     SPACING
     ======================================== */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;  /* Fully rounded */

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-sm: 0 1px 2px rgba(44, 24, 16, 0.05);
  --shadow-md: 0 4px 6px rgba(44, 24, 16, 0.07);
  --shadow-lg: 0 10px 15px rgba(44, 24, 16, 0.1);
  --shadow-xl: 0 20px 25px rgba(44, 24, 16, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(44, 24, 16, 0.06);

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ========================================
     EXTENDED SHADOW SYSTEM (Phase 2)
     ======================================== */

  /* Card-specific shadows */
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
                 0 10px 15px -3px rgba(0, 0, 0, 0.08),
                 0 20px 25px -5px rgba(0, 0, 0, 0.05);

  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* Button shadows */
  --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-button-colored: 0 2px 8px rgba(59, 130, 246, 0.35);

  /* Directional shadows */
  --shadow-upward: 0 -4px 20px rgba(0, 0, 0, 0.1);

  /* ========================================
     CONSISTENT BORDER RADIUS (Phase 2)
     ======================================== */

  --radius-card: 16px;    /* rounded-2xl - Cards */
  --radius-button: 12px;  /* rounded-xl - Buttons */
  --radius-input: 8px;    /* rounded-lg - Inputs */
  --radius-pill: 9999px;  /* rounded-full - Pills */
  --radius-small: 8px;    /* Small elements */

  /* ========================================
     TRANSITION PRESETS (Phase 2)
     ======================================== */

  --transition-default: 200ms ease;
  --transition-lift: transform 0.2s ease, box-shadow 0.2s ease;
  --transition-color: background-color 0.15s ease;

  /* ========================================
     COLOR ACCENT CONSISTENCY (Phase 2)
     ======================================== */

  /* Primary Action (CTA) */
  --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);

  /* WhatsApp */
  --gradient-whatsapp: linear-gradient(135deg, #25D366 0%, #128C7E 100%);

  /* Favorites/Hearts */
  --color-favorite: #EF4444;

  /* Warnings/Alerts */
  --color-warning: #F59E0B;

  /* Success/Open Status */
  --color-success: #22C55E;
}

/* ========================================
   BASE STYLES
   ======================================== */

body {
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-body);
}