/* ========================================================================== Variables CSS - Riad LallaBaya Design System Refonte Luxe Marocain ========================================================================== */ :root { /* ========================================================================== Couleurs - Palette Luxe Marocain ========================================================================== */ /* Base - Tons chauds ivoire/sable */ --color-white: #FFFEFA; --color-off-white: #FAF8F5; --color-sable: #F5F0E8; --color-sable-light: #FBF9F6; --color-sable-dark: #E8E0D4; /* Gris - Nuances chaudes */ --color-gray-100: #F8F6F3; --color-gray-200: #EBE8E3; --color-gray-300: #D6D2CB; --color-gray-400: #A39E95; --color-gray-500: #736E66; --color-gray-600: #524E47; --color-gray-700: #3A3733; --color-gray-800: #2A2724; --color-black: #1A1816; /* Rose/Blush - ACCENT PRINCIPAL (remplace terracotta) */ --color-rose: #D4A5A5; --color-rose-light: #E8C4C4; --color-rose-lighter: #F5E1E1; --color-rose-dark: #B88A8A; --color-rose-deep: #9A7070; /* Or/Cuivre - ACCENT LUXE */ --color-gold: #C9A962; --color-gold-light: #D9C080; --color-gold-dark: #A68B45; --color-cuivre: #B87333; --color-cuivre-light: #D49A5C; /* Ocre - Chaleur terreuse */ --color-ocre: #C4956A; --color-ocre-light: #D9B08C; --color-ocre-dark: #A67B4F; /* Vert Profond - Jardins du riad */ --color-vert: #2D5A4A; --color-vert-light: #3D7A64; --color-vert-dark: #1D3A32; /* Bleu Majorelle - Signature Marrakech */ --color-majorelle: #4169E1; --color-majorelle-light: #6B8AE8; --color-majorelle-dark: #2D4BAF; /* Terracotta - Conservé pour compatibilité */ --color-terracotta: var(--color-rose); --color-terracotta-light: var(--color-rose-light); --color-terracotta-dark: var(--color-rose-dark); /* Couleurs sémantiques */ --color-primary: var(--color-gray-700); --color-primary-hover: var(--color-gray-800); --color-secondary: var(--color-rose); --color-secondary-hover: var(--color-rose-dark); --color-accent: var(--color-gold); --color-accent-hover: var(--color-gold-dark); --color-background: var(--color-white); --color-background-alt: var(--color-sable-light); --color-background-warm: var(--color-rose-lighter); --color-text: var(--color-gray-700); --color-text-muted: var(--color-gray-500); --color-text-light: var(--color-gray-400); --color-border: var(--color-gray-200); --color-border-subtle: var(--color-sable-dark); /* ========================================================================== Typographie ========================================================================== */ /* Familles de polices */ --font-heading: 'Magelo', 'Cormorant Garamond', Georgia, serif; --font-body: 'Questrial', 'Century Gothic', sans-serif; --font-display: 'Magelo', serif; /* Tailles de police */ --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 */ --text-6xl: 3.75rem; /* 60px */ /* Hauteurs de ligne */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Poids de police */ --font-thin: 100; --font-extralight: 200; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Espacement des lettres */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --tracking-elegant: 0.15em; --tracking-luxe: 0.2em; /* ========================================================================== Espacements ========================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Espacements de section */ --section-padding-y: var(--space-20); --section-padding-x: var(--space-6); /* ========================================================================== Conteneurs ========================================================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* ========================================================================== Bordures ========================================================================== */ --radius-none: 0; --radius-sm: 0.125rem; /* 2px */ --radius-md: 0.25rem; /* 4px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; --border-width: 1px; --border-width-2: 2px; /* ========================================================================== Ombres - Tons chauds luxueux ========================================================================== */ --shadow-sm: 0 1px 3px rgba(58, 55, 51, 0.06); --shadow-md: 0 4px 12px rgba(58, 55, 51, 0.08), 0 2px 4px rgba(58, 55, 51, 0.04); --shadow-lg: 0 8px 24px rgba(58, 55, 51, 0.1), 0 4px 8px rgba(58, 55, 51, 0.06); --shadow-xl: 0 16px 48px rgba(58, 55, 51, 0.12), 0 8px 16px rgba(58, 55, 51, 0.08); /* Ombres spéciales */ --shadow-rose: 0 8px 30px rgba(212, 165, 165, 0.2); --shadow-gold: 0 8px 30px rgba(201, 169, 98, 0.2); --shadow-card: 0 4px 20px rgba(180, 140, 140, 0.08); --shadow-card-hover: 0 12px 40px rgba(180, 140, 140, 0.15), 0 4px 12px rgba(0, 0, 0, 0.05); /* ========================================================================== Transitions - Plus fluides et élégantes ========================================================================== */ --duration-fast: 200ms; --duration-normal: 350ms; --duration-slow: 500ms; --duration-luxe: 800ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1); /* ========================================================================== Z-index ========================================================================== */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } /* ========================================================================== Media Query Variables (via custom properties fallback) ========================================================================== */ @media (max-width: 640px) { :root { --section-padding-y: var(--space-12); --section-padding-x: var(--space-4); } }