/* === tokens/fonts.css === */
/* Webfonts — Google Fonts (substitution: original site's exact font files unavailable).
   Heebo = display/headings (900/800 matches the original hero weight)
   Assistant = body/UI text */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=Assistant:wght@400;500;600;700;800&display=swap');


/* === tokens/colors.css === */
/* כספות השלום — color tokens. Extracted from hshalom-safe.co.il screenshots + logo. */
:root {
  /* Brand maroon (bordeaux) */
  --maroon-950: #330009;
  --maroon-900: #4D000F;
  --maroon-800: #6A0015; /* top bar */
  --maroon-700: #8C001B; /* PRIMARY — CTAs, panels */
  --maroon-600: #A31230;
  --maroon-500: #BE2643;
  --maroon-100: #F7E3E7;
  --maroon-50:  #FBF1F3;

  /* Gold (logo border, dividers, hero highlight) */
  --gold-300: #F6D488;
  --gold-400: #F0C660;
  --gold-500: #E9B94A; /* PRIMARY gold */
  --gold-600: #C99832;
  --gold-700: #A67A24;

  /* Accent — hand-drawn scribble underline red */
  --accent-scribble: #D90801;

  /* Ink / charcoal (logo plate, dark sections) */
  --ink-950: #0B0B0E;
  --ink-900: #141417;
  --ink-800: #191A1E; /* logo plate */
  --ink-700: #26272C;

  /* Wine — hero image overlay tints */
  --wine-900: #260E17;
  --wine-700: #4A1D33;
  --wine-500: #602949;

  /* Neutrals */
  --gray-900: #23262B;
  --gray-800: #3F444B; /* card titles */
  --gray-600: #5C6169;
  --gray-500: #7A7F88;
  --gray-300: #C9CCD2;
  --gray-200: #E3E5E9;
  --gray-100: #F1F2F4;
  --gray-50:  #F9FAFA; /* card bg tint */
  --white:    #FFFFFF;
  --paper:    #FCFCFD;

  /* Functional */
  --whatsapp: #25D366;
  --success:  #1F8A4C;
  --danger:   #C81E1E;

  /* ---- Semantic aliases ---- */
  --surface-page:   var(--paper);
  --surface-alt:    var(--gray-50);
  --surface-card:   var(--white);
  --surface-brand:  var(--maroon-700);
  --surface-brand-deep: var(--maroon-800);
  --surface-dark:   var(--ink-800);
  --surface-dark-deepest: var(--ink-950);

  --text-strong:  var(--gray-900);
  --text-heading: var(--gray-800);
  --text-body:    var(--gray-600);
  --text-muted:   var(--gray-500);
  --text-inverse: var(--white);
  --text-inverse-soft: rgba(255,255,255,0.72);
  --text-gold:    var(--gold-500);
  --text-brand:   var(--maroon-700);

  --border-subtle: var(--gray-200);
  --border-gold:   var(--gold-500);
  --border-dark:   rgba(255,255,255,0.12);

  --link:       var(--maroon-700);
  --link-hover: var(--maroon-600);

  --focus-ring: rgba(233,185,74,0.45);
}


/* === tokens/typography.css === */
/* כספות השלום — typography tokens. RTL Hebrew-first. */
:root {
  --font-display: 'Heebo', 'Arial Hebrew', system-ui, sans-serif;
  --font-body: 'Assistant', 'Heebo', system-ui, sans-serif;

  /* Weights */
  --weight-body: 500;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 800;
  --weight-heading: 900;
  --weight-display: 900;

  /* Scale (desktop) */
  --text-hero: clamp(44px, 6vw, 72px);   /* Heebo 900, lh 1.1 */
  --text-h1: clamp(38px, 4.5vw, 56px);   /* Heebo 900 */
  --text-h2: clamp(30px, 3.4vw, 42px);   /* Heebo 800 */
  --text-h3: 28px;                        /* Heebo 800 */
  --text-h4: 22px;                        /* Heebo 700 */
  --text-lead: 21px;                      /* Assistant 400, lh 1.75 */
  --text-body-size: 18px;                 /* Assistant 400, lh 1.7 */
  --text-small: 15px;
  --text-caption: 13px;
  --text-kicker: 17px;                    /* muted line above headings */
  --text-stat: clamp(40px, 4vw, 56px);    /* Heebo 900 numerals */

  --leading-tight: 1.15;
  --leading-heading: 1.25;
  --leading-body: 1.7;
  --leading-loose: 1.85;

  /* Hebrew: avoid letter-spacing; tiny only on latin/numerals */
  --tracking-none: 0;
  --tracking-num: 0.01em;
}


/* === tokens/spacing.css === */
/* כספות השלום — spacing, containers, radii. */
:root {
  --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;
  --space-10: 128px;

  --section-y: clamp(64px, 9vw, 120px); /* @kind spacing */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 820px;
  --gutter: clamp(20px, 4vw, 48px); /* @kind spacing */

  /* Radii — the brand is squared-off; round is reserved for pills/circles */
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* Signature gold rule (short divider under kickers/headings) */
  --rule-width: 64px;
  --rule-height: 3px;
}


/* === tokens/effects.css === */
/* כספות השלום — borders, shadows, overlays, gradients. */
:root {
  /* Shadows — soft, warm-dark, wide */
  --shadow-card: 0 2px 10px rgba(20, 8, 12, 0.06), 0 1px 3px rgba(20, 8, 12, 0.05);
  --shadow-lift: 0 18px 40px -12px rgba(20, 8, 12, 0.28);
  --shadow-gold: 0 10px 28px -8px rgba(233, 185, 74, 0.45);
  --shadow-brand: 0 14px 32px -10px rgba(140, 0, 27, 0.45);
  --shadow-nav: 0 2px 18px rgba(20, 8, 12, 0.18);

  /* Hero / imagery overlays — deep wine grade over metal photography */
  --overlay-hero: linear-gradient(105deg, rgba(38,14,23,0.92) 0%, rgba(74,29,51,0.68) 45%, rgba(96,41,73,0.42) 100%); /* @kind color */
  --overlay-photo: linear-gradient(0deg, rgba(11,11,14,0.55) 0%, rgba(11,11,14,0.0) 55%); /* @kind color */
  --overlay-dark-panel: linear-gradient(180deg, rgba(11,11,14,0.0), rgba(11,11,14,0.65)); /* @kind color */

  /* Gold sheen — for text-fill or thin decorative bars */
  --grad-gold: linear-gradient(100deg, #C99832 0%, #E9B94A 35%, #F6D488 52%, #E9B94A 70%, #C99832 100%); /* @kind color */
  --grad-brand: linear-gradient(120deg, var(--maroon-800), var(--maroon-700)); /* @kind color */

  /* Carbon texture stand-in for the logo plate (no image needed) */
  --carbon: repeating-linear-gradient(45deg, #17181C 0 2px, #101114 2px 4px); /* @kind color */

  /* Blur — used sparingly: sticky nav on scroll only */
  --blur-nav: saturate(1.4) blur(14px); /* @kind other */
  --bg-nav-glass: rgba(20, 3, 8, 0.82); /* @kind color */
}


/* === tokens/motion.css === */
/* כספות השלום — motion tokens. Pair with GSAP (gsap.registerPlugin(ScrollTrigger)). */
:root {
  --dur-fast: 150ms; /* @kind other */
  --dur-base: 300ms; /* @kind other */
  --dur-slow: 600ms; /* @kind other */
  --dur-hero: 1100ms; /* @kind other */

  /* Signature easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */      /* entrances, reveals */
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */  /* small pops: badges, icons */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */        /* vault-door / panel slides */

  /* GSAP equivalents (documented for scripts):
     entrances  → ease: 'expo.out', duration: 1.1, y: 60→0, stagger: 0.08
     scroll     → ScrollTrigger start 'top 80%', once: true
     counters   → duration 1.6, ease 'power2.out', snap 1
     vault door → rotation/perspective, ease 'power4.inOut', duration 1.4 */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; /* @kind other */
    --dur-base: 1ms; /* @kind other */
    --dur-slow: 1ms; /* @kind other */
    --dur-hero: 1ms; /* @kind other */
  }
}


/* === tokens/base.css === */
/* כספות השלום — base element styles (kept minimal). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  direction: rtl;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-h1); font-weight: var(--weight-display); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-heading); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-heading); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-bold); }
p { margin: 0 0 var(--space-4); }
a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) ease; }
a:hover { color: var(--link-hover); }
img { max-width: 100%; display: block; }
::selection { background: var(--gold-500); color: var(--ink-950); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: var(--radius-sm); }


/* כספות השלום — global entry. @import lines only. */