/* ============================================================
   LocalPilot — Colors & Type foundations
   Visual system extracted from the HomePilot Brand Board.
   Primary: Forest green · Accent: Slate charcoal
   Typeface: Rubik (everything + Hebrew) · Public Sans (numerals/metrics)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Public+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* ---- Brand greens ---- */
  --forest:        #355E47; /* Primary · headers, buttons, brand fields */
  --forest-mid:    #466F58; /* Secondary surfaces, hovers */
  --forest-bright: #527F65; /* Gradient top, highlights */
  --forest-deep:   #142B22; /* Gradient base, dark fills */
  --sage:          #5C8870; /* Eyebrows, accents, chart lines */
  --sage-light:    #87A892; /* Avatars, soft accents */
  --mint:          #DCF2E3; /* Positive bubbles, soft tags */

  /* ---- Accent ---- */
  --slate:         #1F2937; /* Accent · labels, secondary buttons */

  /* ---- Ink / text ---- */
  --ink:           #1A1F2B; /* Primary text */
  --ink-2:         #3D4866; /* Body text */
  --ink-3:         #7A8299; /* Muted, captions */

  /* ---- Surfaces ---- */
  --paper:         #F4F6F5; /* Page background, soft cards */
  --white:         #FFFFFF;
  --line:          #E4E8E6; /* hairline borders on paper */
  --line-soft:     #EDF0EE;

  /* ---- Semantic ---- */
  --bg:            var(--paper);
  --surface:       var(--white);
  --fg:            var(--ink);
  --fg-body:       var(--ink-2);
  --fg-muted:      var(--ink-3);
  --brand:         var(--forest);
  --brand-hover:   var(--forest-mid);
  --accent:        var(--slate);
  --positive-bg:   var(--mint);
  --positive-fg:   var(--forest-deep);

  /* ---- Signature gradient · radial · bright → forest → deep ---- */
  --gradient-signature: radial-gradient(120% 120% at 50% 0%, var(--forest-bright) 0%, var(--forest) 45%, var(--forest-deep) 100%);
  --gradient-signature-linear: linear-gradient(160deg, var(--forest-bright) 0%, var(--forest) 45%, var(--forest-deep) 100%);

  /* ---- Corner radii ---- */
  --r-pill:   8px;   /* small tags / chips */
  --r-button: 10px;
  --r-card:   14px;
  --r-frame:  20px;
  --r-full:   999px; /* avatars, round controls */

  /* ---- Elevation ---- */
  --shadow-rest:   0 1px 2px rgba(20, 43, 34, 0.06);
  --shadow-raised: 0 4px 14px rgba(20, 43, 34, 0.10);
  --shadow-float:  0 12px 30px rgba(53, 94, 71, 0.20);

  /* ---- Type families ---- */
  --font-sans: 'Rubik', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:  'Public Sans', ui-sans-serif, system-ui, sans-serif; /* tabular figures for data */

  /* ---- Type scale (px values from brand board) ---- */
  --fs-display: 60px;
  --fs-h1:      38px;
  --fs-h2:      24px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-eyebrow: 13px;

  /* ---- Spacing scale (4pt base) ---- */
  --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;
}

/* ============================================================
   Semantic type styles
   ============================================================ */

.lp-display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.lp-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.lp-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lp-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.lp-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
}

.lp-num {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--ink);
}