/* ============================================================
   Variables, סטודיו "החופש לנוע"
   Brand tokens, single source of truth (v1.1)
   ============================================================ */

:root {
  /* === Purple System (8 shades) === */
  --color-primary-deepest: #3D2F5C;   /* Plum, emphasis, footer */
  --color-primary-dark:    #4A3E73;   /* Deep, primary hover */
  --color-primary:         #5D4E8C;   /* Deep Purple, primary brand */
  --color-primary-mid:     #7E6BAA;   /* Wisteria, h3, accents */
  --color-primary-light:   #B5A4D4;   /* Soft, decorations */
  --color-primary-soft:    #D4C4E5;   /* Mauve, borders, badges */
  --color-primary-mist:    #EDE7F5;   /* Lavender Mist, alt section bg */
  --color-primary-whisper: #F7F4FB;   /* Whisper, gradient stops */

  /* === Secondary (Sky Blue, Feldenkrais) === */
  --color-secondary: #7DBEE0;
  --color-secondary-deep: #2D7AA8;

  /* === Accent (Turquoise, Babies & CTA) === */
  --color-accent: #4FBFB5;
  --color-accent-deep: #2A8E84;
  --color-accent-deep-hover: #237972;

  /* === WhatsApp green === */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #128C7E;

  /* === Base === */
  --color-bg: #FAF8F5;               /* Cream */
  --color-surface: #FFFFFF;
  --color-border: #E5E3DC;
  --color-text: #2C2A40;             /* Deep Charcoal */
  --color-text-secondary: #6B6B7A;
  --color-text-muted: #9999A3;

  /* === State === */
  --color-success: #3DAD7A;
  --color-success-dark: #2D8657;
  --color-error: #C44545;
  --color-warning: #D4924A;

  /* === Typography === */
  --font-heading: "Rubik", "Heebo", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Assistant", "Heebo", -apple-system, BlinkMacSystemFont, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-button: 17px;
  --fs-label: 14px;

  /* === Spacing (8px grid) === */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* === Border Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(45, 42, 64, 0.05);
  --shadow-card: 0 1px 3px rgba(45, 42, 64, 0.04), 0 4px 16px rgba(45, 42, 64, 0.06);
  --shadow-card-hover: 0 2px 6px rgba(45, 42, 64, 0.06), 0 12px 32px rgba(61, 47, 92, 0.12);
  --shadow-modal: 0 10px 40px rgba(45, 42, 64, 0.18);
  --shadow-cta: 0 2px 8px rgba(42, 142, 132, 0.25);
  --shadow-cta-hover: 0 4px 14px rgba(42, 142, 132, 0.35);
  --shadow-purple: 0 8px 32px rgba(93, 78, 140, 0.15);

  /* === Layout === */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;
  --container-padding: 24px;

  /* === Animation === */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  /* === Z-index === */
  --z-base: 1;
  --z-sticky: 50;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}