/* =========================================================================
   iRestDC Design Tokens — a sub-brand of iRestWEB
   Pink/coral palette layered over the parent design system.
   Import AFTER the parent tokens (or alone — it has everything it needs).
   ========================================================================= */

/* === Fonts: Heebo (Latin + Hebrew) + Noto Sans Arabic + Inter (fallback) === */
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* === iRestDC brand palette ============================================== */
  --pink-50:  #FFF1F8;
  --pink-100: #FCE7F3;
  --pink-200: #FBCFE8;
  --pink-300: #F9A8D4;
  --pink-400: #F472B6;
  --pink-500: #E11D74;   /* primary brand */
  --pink-600: #BE185D;   /* hover / pressed */
  --pink-700: #9D174D;
  --pink-800: #831843;
  --pink-900: #500724;

  --coral-400: #FB7185;  /* gradient partner */
  --coral-500: #F43F5E;

  --ink-900:   #0F172A;  /* body text, footer bg */
  --ink-700:   #334155;  /* paragraph */
  --ink-500:   #64748B;  /* captions, helper */
  --ink-300:   #94A3B8;
  --hairline:  #E2E8F0;
  --hairline-strong: #CBD5E1;

  --bg:        #FFFFFF;
  --bg-alt:    #F8FAFC;
  --bg-tint:   #FDF4FF;
  --bg-pink:   #FCE7F3;

  --success-500: #10B981;
  --success-100: #D1FAE5;
  --warning-500: #F59E0B;
  --warning-100: #FEF3C7;
  --danger-500:  #EF4444;

  /* Semantic aliases (mirror parent DS naming where possible) */
  --accent:        var(--pink-500);
  --accent-hover:  var(--pink-600);
  --accent-pressed:var(--pink-700);
  --accent-soft:   var(--pink-100);
  --accent-tint:   var(--bg-tint);

  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-on-dark:   #FFFFFF;
  --fg-on-dark-2: rgba(255,255,255,0.78);
  --fg-on-dark-3: rgba(255,255,255,0.52);

  --border:        rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.16);
  --border-on-dark: rgba(255,255,255,0.10);

  /* Gradients */
  --grad-accent: linear-gradient(95deg, #E11D74 0%, #FB7185 100%);
  --grad-accent-soft: linear-gradient(135deg, #FCE7F3 0%, #FDF4FF 60%, #FFFFFF 100%);
  --grad-hero-tint: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(225,29,116,0.10), transparent 60%),
                    linear-gradient(180deg, #FDF4FF 0%, #FFFFFF 70%);

  /* === Type ============================================================== */
  --font-display: "Heebo", "Noto Sans Arabic", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Heebo", "Noto Sans Arabic", "Inter", system-ui, -apple-system, sans-serif;
  --font-hebrew:  "Heebo", system-ui, sans-serif;
  --font-arabic:  "Noto Sans Arabic", "Heebo", system-ui, sans-serif;
  --font-latin:   "Heebo", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.375rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;
  --text-6xl:  4.5rem;

  --leading-tight:  1.08;
  --leading-snug:   1.22;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tightest: -0.03em;
  --tracking-tighter:  -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:    0;
  --tracking-widest:    0.12em;

  /* === Spacing =========================================================== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  5rem;
  --space-10: 6rem;
  --space-11: 8rem;

  /* Section padding helpers */
  --section-py-desk: 80px;
  --section-py-mob:  56px;

  /* === Radius ============================================================ */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  12px;    /* CTAs (rounded-xl) */
  --radius-lg:  16px;    /* form inputs */
  --radius-xl:  20px;    /* cards */
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* === Shadow (subtle, pink-tinted on hover only) ======================== */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm: 0 2px 6px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 8px 24px -6px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.06);
  --shadow-lg: 0 24px 60px -16px rgba(15,23,42,0.18);
  --shadow-cta:    0 8px 20px -6px rgba(225,29,116,0.45);
  --shadow-cta-hover: 0 14px 32px -8px rgba(225,29,116,0.55);
  --shadow-pink-halo: 0 0 0 8px rgba(225,29,116,0.08);

  /* === Motion ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    180ms;
  --dur-base:    240ms;
  --dur-slow:    600ms;

  /* === Layout ============================================================ */
  --container-max: 1200px;
  --gutter:        24px;
  --nav-h:         72px;
}

/* === Base resets =========================================================  */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { font-family: var(--font-body); color: var(--ink-900); background: var(--bg); }
body { line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }

[lang="he"], [lang="ar"], [dir="rtl"] { font-family: var(--font-hebrew); }
[lang="ar"] { font-family: var(--font-arabic); }
[lang="en"] { font-family: var(--font-latin); }

/* === Type styles ========================================================= */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw + 1rem, 4.25rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  margin: 0;
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 2.6vw, 2.375rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tighter);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--pink-600);
}
p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
  margin: 0;
}
.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
}
.caption { font-size: var(--text-sm); color: var(--ink-500); }
.grad-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
::selection { background: var(--pink-200); color: var(--ink-900); }
