/* =========================================================
   Binah Design System — colours & typography tokens
   ---------------------------------------------------------
   Import this file first. Everything downstream references
   these custom properties; do not hardcode hex values in
   component CSS.
   ========================================================= */

/* -------- Fonts -------- */
/* Rubik — Hebrew primary. Inter — English body.
   Satoshi is the spec choice for English display + tabular
   numerals but requires a Fontshare licence; we fall back
   to Inter 600/700 with tabular-nums. Drop Satoshi woff2s
   into fonts/satoshi/ and this CSS will pick them up. */

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/rubik/Rubik-VariableFont_wght.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/inter/Inter-VariableFont.woff2') format('woff2-variations');
}

/* Satoshi — optional. If the files don't exist the browser
   silently falls back to the next stack entry (Inter). */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('./fonts/satoshi/Satoshi-Variable.woff2') format('woff2-variations');
}

:root {
  /* ---------------------------------------------------------
     COLOUR — raw palette
     --------------------------------------------------------- */
  --binah-deep-teal:       #0F4C5C;  /* primary, cognitive focus */
  --binah-deep-teal-600:   #0D4250;
  --binah-deep-teal-400:   #2C6E7F;
  --binah-deep-teal-200:   #7AAAB5;

  --binah-indigo-night:    #0B1628;  /* dark surface */
  --binah-indigo-night-2:  #0F1B30;
  --binah-indigo-night-3:  #152540;

  --binah-sage-mint:       #9FD4C0;  /* growth, success */
  --binah-sage-mint-600:   #7DBFA7;
  --binah-sage-mint-200:   #D1EADF;

  --binah-saffron:         #F4A261;  /* engagement highlight */
  --binah-saffron-600:     #E88A42;
  --binah-saffron-200:     #FBDBBF;

  --binah-parchment:       #F5EFE6;  /* light surface */
  --binah-parchment-2:     #EFE7D9;
  --binah-parchment-3:     #E6DCCA;

  --binah-ink:             #1A1F2E;  /* primary dark text */
  --binah-ink-2:           #3A4254;
  --binah-ink-3:           #5E6778;

  --binah-cloud:           #E8EEF2;  /* text on dark surfaces */
  --binah-cloud-2:         #C5CED6;
  --binah-cloud-3:         #8E98A4;

  --binah-terracotta:      #C96F53;  /* errors, warnings, SPARINGLY */
  --binah-terracotta-600:  #B35A3F;
  --binah-terracotta-200:  #E4B4A2;

  /* ---------------------------------------------------------
     SEMANTIC — light mode (default)
     --------------------------------------------------------- */
  --bg:            var(--binah-parchment);
  --bg-2:          var(--binah-parchment-2);
  --bg-3:          #FFFFFF;                 /* raised card on Parchment */
  --surface:       #FFFFFF;
  --surface-alt:   var(--binah-parchment-2);
  --border:        rgba(26, 31, 46, 0.08);
  --border-strong: rgba(26, 31, 46, 0.16);
  --divider:       rgba(26, 31, 46, 0.06);

  --fg:            var(--binah-ink);
  --fg-1:          var(--binah-ink);
  --fg-2:          var(--binah-ink-2);
  --fg-3:          var(--binah-ink-3);
  --fg-on-dark:    var(--binah-cloud);

  --accent:        var(--binah-deep-teal);
  --accent-hover:  var(--binah-deep-teal-600);
  --accent-soft:   rgba(15, 76, 92, 0.08);
  --accent-ring:   rgba(159, 212, 192, 0.55);

  --positive:      var(--binah-sage-mint);
  --positive-fg:   #2F6B5B;
  --positive-soft: rgba(159, 212, 192, 0.18);

  --highlight:     var(--binah-saffron);
  --highlight-fg:  #8A4A18;
  --highlight-soft:rgba(244, 162, 97, 0.18);

  --danger:        var(--binah-terracotta);
  --danger-fg:     #8A3B26;
  --danger-soft:   rgba(201, 111, 83, 0.14);

  /* Shadows — multi-layer, 4–8 % opacity */
  --elev-1: 0 1px 2px rgba(11, 22, 40, 0.04), 0 2px 6px rgba(11, 22, 40, 0.04);
  --elev-2: 0 2px 4px rgba(11, 22, 40, 0.05), 0 8px 24px rgba(11, 22, 40, 0.06);
  --elev-3: 0 8px 16px rgba(11, 22, 40, 0.08), 0 24px 48px rgba(11, 22, 40, 0.08);
  --elev-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;  /* cards */
  --r-xl: 24px;  /* hero cards, modals */
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 96px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;

  /* Data viz gradients */
  --grad-positive: linear-gradient(135deg, var(--binah-deep-teal) 0%, var(--binah-sage-mint) 100%);
  --grad-highlight: linear-gradient(135deg, var(--binah-deep-teal) 0%, var(--binah-saffron) 100%);
  --grad-dark-glow: radial-gradient(ellipse at center, rgba(244,162,97,0.18) 0%, rgba(11,22,40,0) 60%);

  /* ---------------------------------------------------------
     TYPOGRAPHY — stacks
     --------------------------------------------------------- */
  --font-he:      'Rubik', 'Assistant', 'Heebo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Type scale */
  --t-hero:  56px;  --t-hero-lh:  64px;
  --t-h1:    40px;  --t-h1-lh:    48px;
  --t-h2:    28px;  --t-h2-lh:    36px;
  --t-h3:    20px;  --t-h3-lh:    28px;
  --t-h4:    16px;  --t-h4-lh:    24px;
  --t-body:  15px;  --t-body-lh:  24px;
  --t-small: 13px;  --t-small-lh: 20px;
  --t-micro: 11px;  --t-micro-lh: 16px;
}

/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */
:root.dark, [data-theme="dark"] {
  --bg:            var(--binah-indigo-night);
  --bg-2:          var(--binah-indigo-night-2);
  --bg-3:          var(--binah-indigo-night-3);
  --surface:       var(--binah-indigo-night-2);
  --surface-alt:   var(--binah-indigo-night-3);
  --border:        rgba(232, 238, 242, 0.08);
  --border-strong: rgba(232, 238, 242, 0.16);
  --divider:       rgba(232, 238, 242, 0.06);

  --fg:            var(--binah-cloud);
  --fg-1:          var(--binah-cloud);
  --fg-2:          var(--binah-cloud-2);
  --fg-3:          var(--binah-cloud-3);
  --fg-on-dark:    var(--binah-cloud);

  --accent:        var(--binah-sage-mint);
  --accent-hover:  var(--binah-sage-mint-600);
  --accent-soft:   rgba(159, 212, 192, 0.10);

  --highlight:     var(--binah-saffron-600);
  --highlight-fg:  #F4A261;
  --highlight-soft: rgba(244, 162, 97, 0.14);

  --elev-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 8px rgba(0,0,0,0.35);
  --elev-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.40);
  --elev-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 48px rgba(0,0,0,0.50);

  --binah-saffron-200: #6B4420;
  --binah-saffron:     #E88A42;
}

/* ---------------------------------------------------------
   SEMANTIC ELEMENT STYLES
   Opt-in — apply by wrapping content in .binah-prose or
   by using the explicit classes.
   --------------------------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

[dir="rtl"] body, .binah-he {
  font-family: var(--font-he);
}

.binah-hero, h1.binah, .binah-prose h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: var(--t-hero-lh);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

h1, .binah-h1, .binah-prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--t-h1-lh);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

h2, .binah-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

h3, .binah-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--t-h3-lh);
  color: var(--fg-1);
}

h4, .binah-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--t-h4-lh);
  color: var(--fg-1);
}

p, .binah-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--fg-2);
  text-wrap: pretty;
}

.binah-meta, small, .binah-small {
  font-size: var(--t-small);
  line-height: var(--t-small-lh);
  color: var(--fg-3);
}

.binah-micro, .binah-eyebrow {
  font-size: var(--t-micro);
  line-height: var(--t-micro-lh);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
}

.binah-tabular, .binah-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -0.01em;
}

code, kbd, pre, .binah-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a, .binah-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
a:hover, .binah-link:hover {
  border-bottom-color: currentColor;
}

/* RTL helpers */
.rtl { direction: rtl; text-align: right; }
.ltr { direction: ltr; text-align: left; }

/* Fine grain noise (use on Parchment hero sections) */
.binah-grain {
  position: relative;
}
.binah-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.12 0 0 0 0 0.18 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 1;
  mix-blend-mode: multiply;
}