/* ======================================================
   DESIGN SYSTEM VARIABLES
   THE I LOVE YOU GIRLS COMPANY
   ====================================================== */

:root {

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

--bg:#ffffff;
--text:#111;
--border:rgba(0,0,0,0.08);
--icon-hover:#666;


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

/* Brand */
--color-primary: #d52b1e;
--color-primary-hover: #b42117;

/* Accent */
--color-accent: #2ecc71;
--color-accent-hover: #27ae60;

/* Neutrals */
--color-black: #000000;
--color-dark: #111111;
--color-gray-dark: #444444;
--color-gray: #777777;
--color-gray-light: #cccccc;
--color-light: #f5f5f5;
--color-white: #ffffff;

/* Transparent overlays */
--overlay-dark: rgba(0,0,0,0.7);
--overlay-medium: rgba(0,0,0,0.6);
--overlay-light: rgba(0,0,0,0.4);


/* ======================================================
   BACKGROUNDS
   ====================================================== */

--bg-header: rgba(255,255,255,0.8);
--bg-footer: #111111;
--bg-hero: rgba(0,0,0,0.6);
--bg-modal: #ffffff;


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

--font-primary: "Playfair Display", "Didot", "Times New Roman", serif;
--font-secondary: 'Source Sans Pro', sans-serif;

/* Font sizes */

--text-xs: 10px;
--text-sm: 12px;
--text-base: 14px;
--text-md: 16px;
--text-lg: 20px;
--text-xl: 26px;
--text-xxl: 34px;
--text-hero: 46px;

/* Font weights */

--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-bold: 700;


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

--space-xxs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-xxl: 38px;
--space-xxxl: 44px;


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

--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 16px;
--radius-round: 50%;


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

--shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.15);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.25);


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

--max-width-xs: 480px;
--max-width-sm: 768px;
--max-width-md: 1024px;
--max-width-lg: 1200px;
--max-width-xl: 1400px;


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

--z-background: -1;
--z-default: 1;
--z-header: 1000;
--z-menu: 3000;
--z-search: 3500;
--z-modal: 9999;


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

--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
--transition-slow: 0.4s ease;


/* ======================================================
   BREAKPOINTS
   ====================================================== */

--breakpoint-mobile: 480px;
--breakpoint-tablet: 768px;
--breakpoint-laptop: 1024px;
--breakpoint-desktop: 1280px;

}