/* ==========================================================================
   WEME — Design Tokens
   Palette and type extracted from the live weme.co.il build. Do not invent
   new brand colours here; add semantic aliases instead.
   ========================================================================== */

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

:root {
  /* --- Brand primitives ------------------------------------------------- */
  --navy:        #1E2447;
  --navy-800:    #2A3160;
  --navy-600:    #3D4680;
  --pink:        #FFC8E4;
  --pink-light:  #FFE8F4;
  --pink-deep:   #F49DC6;   /* darkened pink — borders, markers, hover fills */
  --pink-text:   #C2407A;   /* the ONLY pink that may carry text: 4.87:1 on white */
  --peach:       #F1C7B0;
  --sand:        #B0A986;
  --ink:         #000000;
  --white:       #FFFFFF;
  --gray-700:    #404040;
  --gray-400:    #BFBFBF;
  --gray-200:    #E6E6E6;
  --gray-50:     #FAFAFA;

  /* --- Semantic aliases -------------------------------------------------
     Contrast note: --pink on white is ~1.3:1 and fails WCAG badly. Pink is
     a SURFACE and DECORATION only. Text sitting on pink is always --navy
     (12.6:1). There is no --text-on-pink-light variant for a reason.        */
  --bg:              var(--white);
  --bg-alt:          var(--gray-50);
  --bg-tint:         var(--pink-light);
  --bg-invert:       var(--navy);
  --surface:         var(--white);
  --text:            var(--navy);          /* 14.1:1 on white */
  --text-muted:      var(--gray-700);      /*  9.7:1 on white */
  --text-on-invert:  var(--white);         /* 14.1:1 on navy  */
  --text-on-accent:  var(--navy);          /* on pink surfaces */
  --border:          var(--gray-200);
  --border-strong:   var(--navy);
  --accent:          var(--pink);
  --accent-soft:     var(--pink-light);
  --focus:           var(--navy);
  --focus-invert:    var(--pink);

  /* --- Type -------------------------------------------------------------
     Assistant carries both Hebrew and Latin; Heebo is used for numerals and
     stat figures where its tighter tabular forms read better.               */
  --font-sans: 'Assistant', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-num:  'Heebo', 'Assistant', system-ui, sans-serif;

  /* Fluid scale — clamp() so nothing needs per-breakpoint overrides */
  --fs-xs:   0.8125rem;                              /* 13px  */
  --fs-sm:   0.9375rem;                              /* 15px  */
  --fs-base: 1rem;                                   /* 16px  — never smaller on mobile */
  --fs-md:   clamp(1.0625rem, 1rem + 0.3vw,  1.1875rem);
  --fs-lg:   clamp(1.25rem,  1.15rem + 0.5vw, 1.5rem);
  --fs-xl:   clamp(1.5rem,   1.3rem + 1vw,    2rem);
  --fs-2xl:  clamp(1.875rem, 1.5rem + 1.8vw,  2.75rem);
  --fs-3xl:  clamp(2.25rem,  1.7rem + 2.8vw,  3.75rem);

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.7;    /* Hebrew benefits from slightly looser leading */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  /* --- Spacing — 4px rhythm --------------------------------------------- */
  --sp-1:  0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5:  1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  /* Section rhythm — the block-based layout wants generous gaps */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter:    clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  --maxw:      75rem;   /* 1200px */
  --maxw-prose: 40rem;  /* keeps Hebrew body copy at 60-75 chars */

  /* --- Shape ------------------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(30, 36, 71, .06), 0 1px 3px rgba(30, 36, 71, .08);
  --shadow-md: 0 4px 12px rgba(30, 36, 71, .08), 0 2px 4px rgba(30, 36, 71, .06);
  --shadow-lg: 0 12px 32px rgba(30, 36, 71, .12), 0 4px 8px rgba(30, 36, 71, .06);
  --shadow-xl: 0 24px 64px rgba(30, 36, 71, .16);

  /* --- Motion — 150-300ms micro-interactions ---------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in:  cubic-bezier(.7, 0, .84, 0);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* --- Layers ------------------------------------------------------------ */
  --z-base: 0;  --z-raised: 10;  --z-sticky: 40;
  --z-bar: 60;  --z-drawer: 100; --z-skip: 1000;

  /* Fixed chrome offsets — sections use these so nothing hides behind bars */
  --header-h: 64px;
  --mobilebar-h: 68px;
}

@media (min-width: 1024px) {
  :root { --header-h: 80px; --mobilebar-h: 0px; }
}

/* Honour reduced-motion globally by collapsing the duration tokens. Every
   transition in styles.css reads from these, so this one block disables the
   whole motion system rather than needing per-rule overrides. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}