/* ============================================
   LABO Perfume — Design System v1
   טיפוגרפיה, צבעים ויסודות חזותיים
   ============================================ */

/* --- 1. Google Fonts (Heebo) --- */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&display=swap');

/* --- 2. CSS Variables — פלטה אחידה --- */
:root {
  --labo-black:       #0A0A0A;
  --labo-gold:        #C9A961;
  --labo-gold-dark:   #A68A4A;
  --labo-cream:       #F5F1EA;
  --labo-white:       #FFFFFF;
  --labo-gray-900:    #1A1A1A;
  --labo-gray-600:    #555555;
  --labo-gray-300:    #D4D4D4;
  --labo-gray-100:    #F0F0F0;

  --font-family:      'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-display:       clamp(2rem, 4vw, 3rem);
  --fs-h1:            clamp(1.75rem, 3vw, 2.25rem);
  --fs-h2:            clamp(1.375rem, 2.5vw, 1.75rem);
  --fs-h3:            1.25rem;
  --fs-body:          1rem;
  --fs-small:         0.875rem;
  --fs-micro:         0.8125rem;

  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-black:         800;

  --lh-tight:         1.2;
  --lh-normal:        1.5;
  --lh-loose:         1.75;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 80px; --sp-9: 120px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(10,10,10,0.05);
  --shadow-md:  0 4px 12px rgba(10,10,10,0.08);
  --shadow-lg:  0 12px 32px rgba(10,10,10,0.12);
  --shadow-gold: 0 4px 16px rgba(201,169,97,0.25);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease);
  --transition-base: 250ms var(--ease);
  --transition-slow: 400ms var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--labo-gray-900);
  background: var(--labo-white);
  direction: rtl;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-3) 0;
  font-family: var(--font-family);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--labo-black);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.labo-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--labo-black);
}
p { margin: 0 0 var(--sp-3) 0; font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--labo-gray-600); }
.labo-text-muted { color: var(--labo-gray-600); }
.labo-text-gold  { color: var(--labo-gold); }
.labo-text-black { color: var(--labo-black); }
.labo-text-small { font-size: var(--fs-small); }
.labo-text-micro { font-size: var(--fs-micro); letter-spacing: 0.05em; text-transform: uppercase; }

a { color: var(--labo-black); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--labo-gold); }

.labo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: 44px; padding: 12px 28px;
  font-family: var(--font-family); font-size: var(--fs-body);
  font-weight: var(--fw-semibold); letter-spacing: 0.02em;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--transition-base); text-decoration: none;
}
.labo-btn-primary { background: var(--labo-black); color: var(--labo-white); }
.labo-btn-primary:hover { background: var(--labo-gold); color: var(--labo-black); box-shadow: var(--shadow-gold); }
.labo-btn-gold { background: var(--labo-gold); color: var(--labo-black); }
.labo-btn-gold:hover { background: var(--labo-gold-dark); color: var(--labo-white); }
.labo-btn-outline { background: transparent; color: var(--labo-black); border-color: var(--labo-black); }
.labo-btn-outline:hover { background: var(--labo-black); color: var(--labo-white); }

.labo-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-4); }
@media (min-width: 768px) { .labo-container { padding: 0 var(--sp-5); } }
.labo-section { padding: var(--sp-7) 0; }
@media (min-width: 1024px) { .labo-section { padding: var(--sp-9) 0; } }

:focus-visible { outline: 2px solid var(--labo-gold); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}