/* =========================================================
   בסיס
   משתני צבע, איפוס ברירות מחדל, טיפוגרפיה ואנימציות משותפות.
   ========================================================= */

:root {
  --bg: 38 24% 95%;
  --surface: 36 20% 91%;
  --text: 30 6% 11%;
  --muted: 30 5% 38%; /* כהה מספיק לניגודיות 4.5:1 לפחות (תקן נגישות) */
  --stroke: 34 14% 84%;
  --accent: 30 6% 11%;
  --font-body: 'Open Sans Hebrew', 'Open Sans', system-ui, sans-serif;
  --font-display: 'Open Sans Hebrew', 'Open Sans', system-ui, sans-serif;
  --grad: linear-gradient(90deg, #1d1c1a 0%, #1d1c1a 100%);
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  background: hsl(var(--bg));
  color: hsl(var(--text));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
img {
  max-width: 100%;
  display: block;
}
:focus-visible {
  outline: 2px solid #1d1c1a;
  outline-offset: 3px;
  border-radius: 999px;
}
.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-synthesis: none;
}
.muted {
  color: hsl(var(--muted));
}
.eyebrow {
  font-size: 12px;
  color: hsl(var(--muted));
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.accent-gradient {
  background: var(--grad);
}
@keyframes scroll-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(200%);
  }
}
@keyframes role-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(74, 222, 128, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}