:root {
  /* =========================
     COLORS (FOUNDATION)
  ========================= */

  --color-primary: #ff226b;
  --color-primary-dark: #e01a5a;

  --color-white: #ffffff;
  --color-warm:#fbf2eb;
  --color-dark: #1a1a1a;

  --color-gray: #666666;
  --color-light-gray: #ededed;
  

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

  --text-primary: var(--color-dark);
  --text-muted: var(--color-gray);
  --text-inverse: var(--color-white);

  --bg-page: var(--color-white);
  --bg-card: var(--color-white);
  --bg-muted: var(--color-light-gray);

  /* =========================
     TYPOGRAPHY (CLAMP 🔥)
  ========================= */

  --font-size-xs: clamp(12px, 1.5vw, 13px);
  --font-size-sm: clamp(14px, 2vw, 15px);
  --font-size-md: clamp(16px, 2.5vw, 18px);
  --font-size-lg: clamp(20px, 3vw, 24px);
  --font-size-xl: clamp(40px, 5vw, 56px);

  /* =========================
     SPACING (FLUID READY)
  ========================= */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Option future (si tu veux upgrade) */
   --space-fluid-md: clamp(12px, 2vw, 20px); 

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

  --container-width: 900px;
  --container-padding: var(--space-md);

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

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

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

  --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.1);
  --shadow-pink: 0 8px 25px rgba(255, 34, 107, 0.15);

  /* =========================
     GRADIENTS
  ========================= */

  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  --gradient-grey:linear-gradient(135deg, 
	var(--color-light-gray), 
	var(--color-white)
  );

  /* =========================
     TRANSITIONS (SAFE)
  ========================= */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}