/* Design tokens — single source of truth for colors, spacing, typography. */

:root {
  /* ————— Colors: warm neutral base ————— */
  --color-bg: #FAF7F2;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4EFE6;

  --color-text: #2A2622;
  --color-text-muted: #6B655E;
  --color-text-inverse: #FAF7F2;

  --color-border: #E8E2D8;
  --color-border-strong: #C9C2B4;

  /* ————— Brand accents ————— */
  --color-sage: #8A9B7A;
  --color-sage-dark: #6E7E5F;
  --color-sage-light: #C9D3BE;

  --color-terracotta: #C97F5C;
  --color-terracotta-dark: #A45F42;
  --color-terracotta-light: #E7BEA9;

  --color-gold: #B8925A;

  /* semantic */
  --color-success: var(--color-sage);
  --color-warning: var(--color-terracotta);
  --color-danger: #B24A3B;

  /* ————— Spacing (8-pt grid) ————— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ————— Radii ————— */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ————— Shadows ————— */
  --shadow-xs: 0 1px 2px rgba(42, 38, 34, 0.04);
  --shadow-sm: 0 2px 6px rgba(42, 38, 34, 0.05);
  --shadow-md: 0 6px 16px rgba(42, 38, 34, 0.06);
  --shadow-lg: 0 16px 40px rgba(42, 38, 34, 0.10);

  /* ————— Typography ————— */
  --font-family: 'Assistant', 'Arial Hebrew', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Frank Ruhl Libre', 'David Libre', Georgia, serif;
  --font-script: 'Great Vibes', 'Cormorant Garamond', cursive;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-3xl: 48px;
  --fs-4xl: 64px;
  --fs-5xl: 88px;
  --fs-6xl: 120px;

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

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ————— Layout ————— */
  --sidebar-width: 84px;
  --sidebar-width-open: 240px;
  --header-height: 88px;
  --container-max: 1360px;

  /* ————— Motion ————— */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ————— Z-index scale ————— */
  --z-sidebar: 40;
  --z-header: 50;
  --z-modal: 100;
  --z-toast: 200;

  /* ————— Public site tokens ————— */
  --site-nav-size: 56px;         /* hamburger + langs pill height */
  --site-hero-min-h: 100vh;      /* fullscreen hero */
  --site-hero-min-h-inner: 82vh; /* section hero inside pages */
  --site-side-inset: 24px;
  --site-container: 1200px;
  --site-container-narrow: 720px;
  --site-veil: rgba(20, 18, 15, 0.28);
  --site-veil-strong: rgba(20, 18, 15, 0.5);
  --site-glow-ivory: rgba(250, 247, 242, 0.94);
}

/* When a page renders LTR (English), we mirror direction-sensitive tokens
   automatically through logical properties — no override needed. Hebrew
   serif fallback comes first for HE, latin serif first for EN. */
html[lang="he"] {
  --font-serif: 'Frank Ruhl Libre', 'David Libre', 'Cormorant Garamond', Georgia, serif;
}
html[lang="en"] {
  --font-serif: 'Cormorant Garamond', 'Frank Ruhl Libre', Georgia, serif;
}