/* ==========================================================================
   Kehilat Bethlechem: design tokens
   Three layers: primitive (raw values) → semantic (purpose) → component.
   Components use semantic/component tokens only, never raw hex.
   Direction: clean monochrome (white · grey · near-black), big rounded blocks,
   generous type, in the spirit of awesomic.com / gumroad.com.
   To re-colour the whole site later, change the SEMANTIC layer only.
   ========================================================================== */

/* ---- Fonts (self-hosted, Latin subset, WOFF2) ---- */
@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree-var-latin.woff2") format("woff2");
  font-weight: 300 800;              /* one variable file covers every weight */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";  /* the organisation name ONLY */
  src: url("../assets/fonts/cinzel-decorative-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ======================= 1. PRIMITIVES ======================= */
  --white:    #FFFFFF;
  --grey-50:  #FAFAFA;
  --grey-100: #F4F4F5;
  --grey-150: #ECECEE;
  --grey-200: #E4E4E7;
  --grey-300: #D4D4D8;
  --grey-400: #A1A1AA;
  --grey-450: #8A8A93;   /* 3.4:1: LARGE text only (two-tone headlines) */
  --grey-500: #65656D;   /* ≥5:1 on white and on grey-100: smallest text colour */
  --grey-600: #52525B;
  --grey-700: #3F3F46;
  --grey-800: #27272A;
  --grey-900: #18181B;
  --grey-950: #09090B;

  /* ======================= 2. SEMANTIC ======================= */
  --color-bg: var(--white);
  --color-surface: var(--grey-100);         /* the grey rounded blocks */
  --color-surface-2: var(--grey-150);
  --color-raised: var(--white);             /* white rows inside grey blocks */
  --color-inverse: var(--grey-950);         /* dark blocks + footer */
  --color-inverse-2: var(--grey-900);
  --color-text: var(--grey-950);
  --color-text-2: var(--grey-700);          /* body copy */
  --color-text-3: var(--grey-500);          /* captions, labels */
  --color-text-accent: var(--grey-450);     /* the grey half of two-tone headlines (large text only) */
  --color-on-inverse: var(--white);
  --color-on-inverse-2: var(--grey-400);
  --color-primary: var(--grey-950);         /* buttons */
  --color-primary-hover: var(--grey-800);
  --color-on-primary: var(--white);
  --color-border: var(--grey-200);
  --color-border-strong: var(--grey-300);
  --color-focus: var(--grey-950);
  --color-scrim: rgba(9, 9, 11, 0.42);

  /* Typography */
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Cinzel Decorative", "Cinzel", "Trajan Pro", Georgia, serif;

  /* Fluid scale (320px → 1280px) */
  --text-xs:   0.8125rem;                                  /* 13 */
  --text-sm:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);/* 14–15 */
  --text-base: 1rem;
  --text-md:   clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);   /* 17–20 */
  --text-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);   /* 20–26 */
  --text-xl:   clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);    /* 26–40 */
  --text-2xl:  clamp(2rem, 1.35rem + 3.1vw, 4.25rem);      /* 32–68: hero */
  --text-brand: clamp(1.0625rem, 0.9rem + 0.8vw, 1.5rem);  /* name lockup */

  /* 8-point spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;    --space-7: 2.5rem;  --space-8: 3rem;
  --space-9: 4rem;     --space-10: 5rem;   --space-11: 6rem;
  --section-y: clamp(var(--space-9), 5vw + 1.5rem, 7.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);

  /* Radii: big soft blocks, 12px controls */
  --radius-md: 12px;     /* buttons, inputs */
  --radius-lg: 20px;     /* rows inside blocks */
  --radius-xl: clamp(24px, 2vw + 16px, 36px);  /* blocks */
  --radius-pill: 999px;

  /* Elevation: 3 levels, soft and neutral */
  --shadow-1: 0 1px 2px rgba(9, 9, 11, 0.05);
  --shadow-2: 0 8px 24px -8px rgba(9, 9, 11, 0.14), 0 2px 6px rgba(9, 9, 11, 0.05);
  --shadow-3: 0 32px 64px -20px rgba(9, 9, 11, 0.28), 0 8px 20px -8px rgba(9, 9, 11, 0.1);

  /* Motion (Apple curves) */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --spring: cubic-bezier(0.2, 1.45, 0.4, 1);   /* press release with a hint of overshoot */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 300ms;
  --dur-sheet: 420ms;
  --dur-reveal: 640ms;

  /* Layout */
  --container: 1200px;
  --header-h: 64px;
  --tap: 44px;
  --z-header: 50;
  --z-fab: 60;
  --z-menu: 70;
  --z-sheet: 100;
  --z-toast: 120;

  /* ======================= 3. COMPONENT ======================= */
  --btn-h: 48px;
  --btn-radius: var(--radius-md);
  --block-radius: var(--radius-xl);
  --row-radius: var(--radius-lg);
  --sheet-radius: 28px;
  --sheet-max-w: 460px;
  --header-bg-scrolled: rgba(255, 255, 255, 0.8);
  --toast-bg: var(--grey-950);
  --toast-fg: var(--white);

  /* Contact cards: change these 7 lines to re-colour them (see README → "Contact card colours") */
  --contact-bg: var(--grey-900);
  --contact-bg-hover: var(--grey-800);
  --contact-text: var(--white);
  --contact-label: var(--grey-400);
  --contact-icon-bg: var(--grey-800);
  --contact-whatsapp: #25D366;
  --contact-focus: var(--white);
}

@media (min-width: 768px) {
  :root { --header-h: 76px; }
}