/* ═══ MELEK ART — DESIGN TOKENS ═══ */

:root {
  /* Couleurs — Fonds */
  --color-bg-primary: #FAF8F5;
  --color-bg-secondary: #F2EDE6;
  --color-bg-kraft: #F0EBE1;
  --color-bg-dark: #1A1714;
  --color-bg-dark-card: #2A2520;

  /* Couleurs — Texte */
  --color-text-primary: #1A1714;
  --color-text-secondary: #5C5650;
  --color-text-on-dark: #F2EDE6;
  --color-text-caption: #8A8279;

  /* Couleurs — Accents */
  --color-accent-red: #C4303B;
  --color-accent-red-light: #E05560;
  --color-accent-gold: #C89B3C;
  --color-accent-gold-light: #D4AD50;
  --color-accent-blue: #2B4C8C;
  --color-accent-green: #3D6B4F;
  --color-accent-pink: #D4708A;

  /* Couleurs — Structure */
  --color-border: #D1CBC3;
  --color-border-light: #E8E3DC;
  --color-shadow: rgba(26, 23, 20, 0.08);
  --color-shadow-hover: rgba(26, 23, 20, 0.15);
  --color-overlay: rgba(26, 23, 20, 0.7);

  /* Typographie */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', 'Source Sans 3', 'Nunito Sans', sans-serif;
  --font-handwritten: 'Caveat', cursive;

  /* Tailles */
  --text-h1: clamp(2.25rem, 4vw, 3.5rem);
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);
  --text-h3: clamp(1.375rem, 2.2vw, 1.75rem);
  --text-body: clamp(1rem, 1.2vw, 1.125rem);
  --text-body-lg: clamp(1.125rem, 1.4vw, 1.25rem);
  --text-caption: clamp(0.8125rem, 0.9vw, 0.875rem);
  --text-overline: 0.75rem;

  /* Interligne */
  --leading-tight: 1.15;
  --leading-normal: 1.7;
  --leading-relaxed: 1.85;

  /* Espacement responsive */
  --space-xs: clamp(0.375rem, 1vw, 0.5rem);
  --space-sm: clamp(0.75rem, 2vw, 1rem);
  --space-md: clamp(1rem, 3vw, 2rem);
  --space-lg: clamp(2rem, 5vw, 4rem);
  --space-xl: clamp(3rem, 7vw, 7.5rem);
  --space-hero: clamp(5rem, 12vw, 12.5rem);

  /* Animations */
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 300ms;
  --duration-medium: 500ms;
  --duration-slow: 800ms;

  /* Ombres */
  --shadow-card: 0 4px 24px var(--color-shadow);
  --shadow-card-hover: 0 8px 32px var(--color-shadow-hover);
  --shadow-image: 0 2px 16px var(--color-shadow);

  /* Rayons */
  --radius-none: 0px;
  --radius-subtle: 2px;
  --radius-small: 4px;

  /* Largeur de contenu */
  --content-max: 1200px;
  --content-text: 680px;
  --content-wide: 1440px;
}