/* Stable global design tokens. Component-specific geometry remains with its component. */
:root {
  --color-ink: #431f10;
  --color-accent: #f16a2c;
  /* Original brand orange used by shared headings and actions. */
  --color-accent-start: #FF6A3D;
  --color-accent-end: #FB8C2E;
  /* 5.10.2026: הוחזר לערך המקורי לבקשת חן. ניסיתי להעמיק אותו (#FBF6EE ואז
     #F8F1E6) כדי שייקרא כקרם גם במסך של אייפון, וזה שינה את כל הצבעוניות של
     האתר. אם נחזור לזה, העמקה של אזורים נבחרים עדיפה על הטוקן הגלובלי. */
  --color-canvas: #fdfbf8;
  --color-surface: #fffdf9;
  --color-muted-border: #dad2cc;
  --gradient-accent: linear-gradient(90deg, var(--color-accent-start) 0%, var(--color-accent-end) 100%);

  --font-family-body: 'Afek', 'Assistant', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 72px;
  --space-3xl: 96px;

  --container-content: 1240px;
  --container-wide: 1440px;
  --radius-sm: 8px;
  --radius-md: 13px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --button-radius: var(--radius-pill);
  --button-min-height: 44px;
  --button-transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 36px;
  --shadow-card: 0 14px 34px rgba(67, 31, 16, .18);
  --shadow-floating: 0 10px 30px rgba(67, 31, 16, .13);

  --motion-fast: 150ms;
  --motion-normal: 280ms;
  --motion-slow: 560ms;
  --ease-standard: ease;
  --ease-emphasis: cubic-bezier(.22, .9, .3, 1);
  /* Documentation tokens: CSS custom properties cannot drive media-query conditions. */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --z-header: 1000;
  --z-floating-contact: 900;
  --z-floating-dialog: 901;

  /* Existing names remain as compatibility aliases for the approved design. */
  --ink: var(--color-ink);
  --orange: var(--color-accent);
  --cream: var(--color-canvas);
  --dash-beige: var(--color-muted-border);
  --grad-accent: var(--gradient-accent);
}