/* =========================================================================
   Mador Finance (מדור פיננסים) — Design tokens
   Source of truth: design/design-system.md
   Usage: <html lang="he" dir="rtl"> + link this file before site CSS.
   Fonts (load in <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500&family=Assistant:wght@400;600;700&display=swap" rel="stylesheet">
   All contrast ratios are listed in design-system.md §1.3.
   ========================================================================= */

:root {
  /* ---------- 1. Color: brand greens ---------- */
  --green-950: #00301D;   /* deepest — hero/footer/final-CTA backgrounds      */
  --green-800: #004A2C;   /* primary button hover/active, dark band surfaces  */
  --green-700: #006039;   /* BRAND (Rolex green) — primary, links, headings   */
  --green-600: #007A49;   /* small accents on white only (5.41:1)             */
  --green-200: #C9D8CF;   /* muted text on dark green, dividers on dark       */
  --green-100: #E9F2EC;   /* tinted section bg, selected states               */
  --green-50:  #EEF4F0;   /* alternate tinted bg                               */

  /* ---------- Whites / neutrals ---------- */
  --white:     #FFFFFF;
  --ivory:     #FAF8F3;   /* default page background (warm off-white)         */
  --sand:      #F3EBDA;   /* champagne-tinted surface (testimonial, badges)   */
  --ink:       #1A211E;   /* body text (green-tinted near-black)              */
  --slate:     #4F5A54;   /* secondary text, captions                         */
  --stone:     #7D8781;   /* input borders / non-text UI (≥3:1)               */
  --line:      #DCE2DE;   /* hairline dividers (decorative only)              */
  --line-dark: rgba(201, 216, 207, 0.22); /* hairlines on green               */

  /* ---------- Accent: champagne gold (restrained) ---------- */
  --gold-300:  #E2CFA6;   /* text/icons on green-700+ (5.02:1)                */
  --gold-400:  #D8C08F;   /* text/icons/focus ring on green-950 (8.23:1)      */
  --gold-500:  #B8975A;   /* DECORATIVE ONLY on light bg (rules, ornaments)   */
  --gold-700:  #8A6A2F;   /* gold text on white/ivory (5.02 / 4.73:1)         */

  /* ---------- Feedback ---------- */
  --error:     #B42318;   /* 6.57:1 on white — always paired with icon + text */
  --error-bg:  #FDF1F0;
  --success:   #006039;   /* reuse brand green — paired with ✓ icon + text    */
  --success-bg:#E9F2EC;

  /* ---------- Semantic roles ---------- */
  --color-bg:              var(--ivory);
  --color-surface:         var(--white);
  --color-surface-tint:    var(--green-50);
  --color-surface-accent:  var(--sand);
  --color-surface-dark:    var(--green-950);
  --color-text:            var(--ink);
  --color-text-muted:      var(--slate);
  --color-text-on-dark:    var(--white);
  --color-text-muted-on-dark: var(--green-200);
  --color-heading:         var(--green-950);
  --color-link:            var(--green-700);
  --color-link-hover:      var(--green-950);
  --color-primary:         var(--green-700);
  --color-primary-hover:   var(--green-800);
  --color-primary-active:  var(--green-950);
  --color-accent:          var(--gold-500);
  --color-accent-text:     var(--gold-700);
  --color-accent-on-dark:  var(--gold-400);
  --color-border:          var(--line);
  --color-border-input:    var(--stone);
  --color-focus:           var(--green-950);  /* ring on light surfaces */
  --color-focus-on-dark:   var(--gold-400);   /* ring on dark surfaces  */

  /* ---------- 2. Typography ---------- */
  --font-display: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  --font-body:    "Assistant", "Heebo", "Arial Hebrew", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;   /* Frank Ruhl only */
  --fw-semibold:600;   /* Assistant only  */
  --fw-bold:    700;

  /* Fluid scale (min @360px → max @1280px). Ratio ≈ 1.25 mobile / 1.333 desktop */
  --fs-xs:   0.875rem;                                  /* 14px – legal, captions (min) */
  --fs-sm:   1rem;                                      /* 16px – labels, small UI       */
  --fs-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17→18px body                 */
  --fs-lg:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);/* 19→22 lead/subhead           */
  --fs-h4:   clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);  /* 20→24 card titles            */
  --fs-h3:   clamp(1.5rem, 1.3rem + 0.8vw, 2rem);       /* 24→32                        */
  --fs-h2:   clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);  /* 30→44                        */
  --fs-h1:   clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);   /* 36→60 hero                   */
  --fs-stat: clamp(2.5rem, 2rem + 2.2vw, 3.5rem);       /* counters                     */

  --lh-tight: 1.15;   /* h1/h2 display */
  --lh-snug:  1.3;    /* h3/h4 */
  --lh-body:  1.7;    /* Hebrew body — generous */
  --lh-ui:    1.4;    /* buttons/labels */

  --tracking-eyebrow: 0.04em; /* Hebrew has no case; eyebrow uses weight+gold+rule, not caps */
  --measure: 66ch;            /* max line length for prose */

  /* ---------- 3. Spacing (4px base) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);   /* vertical section padding 64→128 */
  --gutter:    clamp(1.25rem, 0.8rem + 2vw, 2.5rem); /* side padding 20→40 */
  --container: 1200px;
  --container-narrow: 760px;

  /* ---------- 4. Radius (restrained — sharp = established) ---------- */
  --radius-xs: 2px;   /* inputs, badges          */
  --radius-sm: 4px;   /* buttons, cards          */
  --radius-md: 8px;   /* form panel, modals      */
  --radius-pill: 999px; /* floating button, toggles */

  /* ---------- 5. Shadows (green-tinted, soft) ---------- */
  --shadow-1: 0 1px 2px rgba(0, 48, 29, 0.06), 0 1px 1px rgba(0, 48, 29, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 48, 29, 0.08), 0 1px 3px rgba(0, 48, 29, 0.06);
  --shadow-3: 0 18px 40px rgba(0, 48, 29, 0.14), 0 4px 10px rgba(0, 48, 29, 0.06);
  --shadow-float: 0 8px 24px rgba(0, 48, 29, 0.28);
  --shadow-inset-gold: inset 0 0 0 1px rgba(184, 151, 90, 0.45);

  /* ---------- 6. Borders / focus ---------- */
  --border-hair: 1px solid var(--color-border);
  --border-input: 1px solid var(--color-border-input);
  --focus-ring: 0 0 0 2px var(--white), 0 0 0 5px var(--color-focus);
  --focus-ring-dark: 0 0 0 2px var(--green-950), 0 0 0 5px var(--color-focus-on-dark);
  --focus-outline-width: 3px;
  --focus-outline-offset: 3px;

  /* ---------- 7. Sizing ---------- */
  --tap-min: 48px;          /* every interactive target ≥48×48 (exceeds 44) */
  --input-height: 56px;
  --btn-height: 52px;
  --btn-height-lg: 60px;
  --header-h: 72px;
  --header-h-compact: 60px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 40px;
  --fab-size: 60px;

  /* ---------- 8. Breakpoints (reference — CSS vars can't be used in @media) ----------
     sm  ≥ 480px   large phones
     md  ≥ 768px   tablets            → 2-col grids
     lg  ≥ 1024px  small laptops      → full nav, hero split
     xl  ≥ 1280px  desktops           → container max
  */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- 9. Z-index ---------- */
  --z-base: 1;
  --z-sticky: 100;   /* header */
  --z-fab: 200;      /* floating contact */
  --z-a11y: 300;     /* accessibility panel */
  --z-modal: 400;
  --z-skip: 500;     /* skip link */

  /* ---------- 10. Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* reveals — calm deceleration */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* accordions, panels          */
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);     /* hovers, color               */

  --dur-instant: 100ms;   /* press feedback          */
  --dur-fast:    180ms;   /* hover, color, focus     */
  --dur-base:    280ms;   /* accordion, menu, panel  */
  --dur-slow:    700ms;   /* scroll reveal           */
  --dur-hero:    1100ms;  /* hero entrance           */
  --dur-counter: 1600ms;  /* number counters         */
  --dur-ambient: 24s;     /* hero background drift (loop) */

  --reveal-distance: 24px;  /* translateY for scroll reveal */
  --reveal-stagger: 90ms;   /* per child, max 4 children → 360ms */
  --hover-lift: -3px;

  /* ---------- 11. Photography (v2, see design/redesign-v2.md §7) ----------
     Rule: any text on a photo sits on overlay alpha ≥ 0.85 of green-950.
     Worst case (pure-white pixel under the overlay): white text 9.2:1,
     gold-400 text 5.2:1, green-200 text 6.2:1. Never put text on alpha < 0.85. */
  --photo-bg: var(--green-950);          /* shows while loading / if file missing */
  --photo-bg-light: var(--green-50);     /* card image wells                       */
  --photo-filter: saturate(0.9) contrast(1.02); /* calm, slightly muted stock     */
  --photo-radius: var(--radius-sm);
  --ratio-hero: 16 / 9;
  --ratio-card: 4 / 3;
  --ratio-banner: 21 / 9;                /* services-page section headers (≥768) */
  --ratio-hero-mobile: 4 / 3;

  /* Desktop hero (RTL): text column on the right → darkest at the right edge.
     "to left" starts at the right. Stays ≥0.86 across the text column (0–58%). */
  --photo-overlay-hero: linear-gradient(to left,
      rgba(0, 48, 29, 0.92) 0%,
      rgba(0, 48, 29, 0.86) 58%,
      rgba(0, 48, 29, 0.30) 82%,
      rgba(0, 48, 29, 0.08) 100%);
  /* Mobile hero: photo at top, fades to solid green-950 where the text starts */
  --photo-overlay-hero-mobile: linear-gradient(to bottom,
      rgba(0, 48, 29, 0.10) 0%,
      rgba(0, 48, 29, 0.35) 45%,
      rgba(0, 48, 29, 0.88) 80%,
      #00301D 100%);
  /* Banner (services headers): text sits in the bottom 40% */
  --photo-overlay-banner: linear-gradient(to top,
      rgba(0, 48, 29, 0.92) 0%,
      rgba(0, 48, 29, 0.86) 40%,
      rgba(0, 48, 29, 0.20) 75%,
      rgba(0, 48, 29, 0) 100%);
  /* Decorative tint on photos WITHOUT text (cards, form-side): unifies stock */
  --photo-tint: linear-gradient(180deg, rgba(0, 48, 29, 0) 55%, rgba(0, 48, 29, 0.18) 100%);
  --photo-frame: inset 0 0 0 1px rgba(184, 151, 90, 0.35); /* thin gold hairline */
  --photo-zoom-hover: 1.04;
  --dur-photo: 600ms;        /* card image zoom on hover */
  --dur-hero-photo: 1800ms;  /* one-time hero settle (scale 1.04 → 1) */

  /* ---------- 12. Calculator (range inputs) ---------- */
  --range-track-h: 6px;
  --range-thumb: 28px;              /* visual; the input box itself is 48px tall */
  --range-track: var(--line);
  --range-fill: var(--green-700);
  --range-thumb-bg: var(--white);
  --range-thumb-border: var(--green-700);  /* 7.69:1 on white, ≥3:1 UI */

  /* ---------- 13. Carousel ---------- */
  --carousel-gap: var(--space-5);
  --carousel-peek: 15%;             /* mobile: card = 85% of the width, the next one peeks in */
}

/* -------------------------------------------------------------------------
   Reduced motion: OS setting OR accessibility-toolbar "stop animations"
   (toolbar adds class .a11y-no-motion on <html>).
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-hero: 0ms;
    --dur-counter: 0ms;
    --reveal-distance: 0px;
    --reveal-stagger: 0ms;
    --hover-lift: 0px;
    --dur-photo: 0ms;
    --dur-hero-photo: 0ms;
    --photo-zoom-hover: 1;
  }
}
html.a11y-no-motion {
  --dur-instant: 0ms;
  --dur-fast: 0ms;
  --dur-base: 0ms;
  --dur-slow: 0ms;
  --dur-hero: 0ms;
  --dur-counter: 0ms;
  --reveal-distance: 0px;
  --reveal-stagger: 0ms;
  --hover-lift: 0px;
  --dur-photo: 0ms;
  --dur-hero-photo: 0ms;
  --photo-zoom-hover: 1;
}
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* -------------------------------------------------------------------------
   Accessibility-toolbar modes (classes on <html>)
   ------------------------------------------------------------------------- */
/* Text size: toolbar sets html { font-size } via classes; all tokens are rem-based */
html.a11y-text-110 { font-size: 110%; }
html.a11y-text-125 { font-size: 125%; }
html.a11y-text-150 { font-size: 150%; }

/* High contrast: pure black/white/brand-dark, gold removed */
html.a11y-high-contrast {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-tint: #FFFFFF;
  --color-surface-accent: #FFFFFF;
  --color-surface-dark: #000000;
  --color-text: #000000;
  --color-text-muted: #000000;
  --color-text-muted-on-dark: #FFFFFF;
  --color-heading: #000000;
  --color-link: #00301D;
  --color-primary: #00301D;
  --color-primary-hover: #000000;
  --color-accent: #000000;
  --color-accent-text: #000000;
  --color-accent-on-dark: #FFFFFF;
  --color-border: #000000;
  --color-border-input: #000000;
  --color-focus: #000000;
  --color-focus-on-dark: #FFFF00;
  /* Photos: solid overlay so text never depends on the image */
  --photo-overlay-hero: linear-gradient(#000000, #000000);
  --photo-overlay-hero-mobile: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, #000000 70%);
  --photo-overlay-banner: linear-gradient(to top, #000000 45%, rgba(0,0,0,0.2) 100%);
  --range-fill: #000000;
  --range-thumb-border: #000000;
  --range-track: #000000;
}
/* Readable font: swap serif display for the body sans */
html.a11y-readable-font { --font-display: var(--font-body); }
/* Underline all links */
html.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 0.2em; }