/**
 * variables.css
 * Delicatessen Salvatore
 *
 * Master CSS custom properties.
 * This file is loaded first. Every other CSS file references these variables.
 * Never hardcode colors, spacing, or typography values anywhere else.
 */

:root {

  /* =====================
     COLORS
     ===================== */

  --color-primary:      #6B1F2A;              /* Deep Burgundy */
  --color-primary-dark: #4E1520;              /* Hover / pressed state */
  --color-secondary:    #F5EDD6;              /* Warm Cream */
  --color-background:   #FFFFFF;              /* Page background */
  --color-white:        #FFFFFF;
  --color-black:        #000000;
  --color-text:         #1C1C1C;              /* Dark Charcoal — main body text */
  --color-text-light:   #5A5A5A;              /* Captions, labels, secondary text */
  --color-accent:       #B8972A;              /* Warm Gold — use sparingly */
  --color-success:      #3A6B3A;              /* Natural Green */
  --color-error:        #9B3A3A;              /* Muted Red */
  --color-border:       #E8E0D0;              /* Subtle borders and dividers */
  --color-overlay:      rgba(28, 28, 28, 0.45); /* Image overlays */


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

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Font sizes */
  --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:  2rem;      /* 32px */
  --font-size-3xl:  2.5rem;    /* 40px */
  --font-size-4xl:  3.5rem;    /* 56px */
  --font-size-5xl:  5rem;      /* 80px */

  /* Font weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights */
  --line-height-tight:  1.2;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* Letter spacing */
  --letter-spacing-tight:   -0.02em;
  --letter-spacing-normal:   0em;
  --letter-spacing-wide:     0.05em;
  --letter-spacing-widest:   0.15em;


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

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;


  /* =====================
     LAYOUT
     ===================== */

  --container-max:     1280px;  /* Outer boundary */
  --container-content: 1140px;  /* Main content width */
  --container-narrow:  720px;   /* Blog, forms, narrow sections */


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

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;  /* Pills and circles */


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

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);


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

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


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

  --z-base:    1;
  --z-overlay: 100;
  --z-header:  200;
  --z-modal:   300;

}