/* ==========================================================================
   MediGlow Showcase — Design Tokens
   Source of truth: official Studio Joto brand book + coastal moodboards.
   "Keep the brand language, don't be a slave to the colors." (Romil)
   ========================================================================== */

:root {
  /* ---- Brand colors (brand book = authoritative) ---- */
  --navy:        #30323f;  /* Pantone 533C — primary dark / headings / authority bands */
  --navy-deep:   #283041;  /* enrichment: "Moonlit Ocean" — deeper hero gradient end   */
  --powder:      #bad0d5;  /* Pantone 552C — ACCENT / DECORATION ONLY (fails AA as text)*/
  --aqua:        #a7ccd6;  /* enrichment: "Iced Aqua" — sea-glow shimmer accent         */

  /* ---- Neutrals ---- */
  --cream:       #f5f1e1;  /* card image-frame + soft sections (never grey)             */
  --cream-soft:  #faf7ee;  /* barely-there warm section wash                            */
  --sand:        #cec3b7;  /* brand-book secondary — dividers                           */
  --pearl:       #e0d8d0;  /* her moodboard exact HEX "Sea Pearl"                       */
  --taupe:       #b3aba1;  /* her moodboard exact HEX                                   */
  --line:        #e0d8d0;  /* delicate border line = her Sea Pearl                      */
  --slate:       #57646c;  /* "Bering Sea" — secondary text (AA on white)               */
  --grey-mute:   #7f878a;  /* tertiary labels                                           */
  --charcoal:    #38383c;
  --white:       #ffffff;

  /* ---- Text roles ---- */
  --ink:         var(--navy);             /* primary text/headings on light            */
  --ink-soft:    var(--slate);            /* body secondary                            */
  --ink-mute:    var(--grey-mute);
  --on-dark:           #ffffff;
  --on-dark-soft:      rgba(255,255,255,.74);
  --on-dark-faint:     rgba(255,255,255,.55);

  /* ---- Off-palette functional ---- */
  --wa-green:    #25D366;  /* WhatsApp — the one off-brand CTA color                    */

  /* ---- Typography ---- */
  --font-base: "Rubik", "Heebo", "Segoe UI", system-ui, -apple-system, sans-serif; /* He + Latin */
  --font-display: "Montserrat", "Rubik", sans-serif; /* English display / tagline accent */

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-bold:  700;

  /* Fluid type scale */
  --fs-hero:  clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --fs-h1:    clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --fs-h2:    clamp(1.55rem, 1.2rem + 1.6vw, 2.35rem);
  --fs-h3:    clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-lead:  clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-body:  1.0625rem;   /* 17px */
  --fs-sm:    0.9rem;
  --fs-xs:    0.78rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight: 1.16;
  --lh-snug:  1.4;
  --lh-body:  1.75;       /* Hebrew reads better with airier leading */
  --tracking-eyebrow: 0.22em;
  --tracking-wide: 0.06em;

  /* ---- Layout ---- */
  --container:        1240px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 1rem + 3vw, 3.25rem);
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* ---- Radius (refined / Teoxane-minimal) ---- */
  --r-btn:  3px;
  --r-sm:   6px;
  --r:      10px;
  --r-card: 14px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-card:       0 2px 16px rgba(48,50,63,.06);
  --shadow-card-hover: 0 14px 34px rgba(48,50,63,.13);
  --shadow-nav:        0 1px 0 rgba(48,50,63,.07), 0 6px 24px rgba(48,50,63,.05);
  --shadow-soft:       0 8px 30px rgba(48,50,63,.08);

  /* ---- Motion ---- */
  --t:      .25s cubic-bezier(.22,.61,.36,1);
  --t-slow: .55s cubic-bezier(.22,.61,.36,1);

  /* ---- Motion system (animation upgrade — Teoxane/BioAge reveal rhythm) ---- */
  --ease-out:         cubic-bezier(.22,.61,.36,1);  /* shared easing family       */
  --ease-cinematic:   cubic-bezier(.4,0,.2,1);      /* slow hero crossfade / Ken-Burns */
  --t-reveal:         .7s var(--ease-out);          /* scroll fade-up: duration + ease */
  --rv-stagger:       90ms;                          /* per-item reveal delay step  */
  --rv-rise:          22px;                           /* fade-up travel distance     */
  --hero-frame-dwell: 5.5s;                           /* hero crossfade cadence (JS) */
  --glow-aqua:        rgba(167,204,214,.20);          /* ambient glow on navy bands  */
  --glow-powder:      rgba(186,208,213,.16);
  --grain-opacity:    .045;                           /* film-grain overlay strength */

  --z-nav: 100;
  --z-drawer: 200;
  --z-chat: 150;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}