/* ============================================================
   The HandyDreamTeam — design tokens (v2: flat, mobile-first)
   Conversion-focused. Orange primary, slate ink, warm cream.
   Touch-first: bold type, solid color blocks, no heavy shadows.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  /* ---- Palette ---- */
  --orange:      #E8590C;  /* primary CTA / brand */
  --orange-600:  #C8490A;  /* hover/pressed */
  --orange-tint: #FDEDE2;  /* soft fills, icon tiles */
  --cream:       #FFF8F2;  /* page background */
  --surface:     #FFFFFF;  /* cards */
  --ink:         #14181F;  /* headlines, body */
  --ink-soft:    #2C333E;  /* secondary text strong */
  --muted:       #5B6472;  /* captions, helper */
  --line:        #EDE3D9;  /* borders/dividers */
  --line-strong: #DCCFC1;
  --slate-900:   #14181F;
  --ok:          #1F9D55;  /* success/verified */
  --star:        #E8590C;  /* review stars */

  /* ---- Semantic ---- */
  --bg:          var(--cream);
  --surface-2:   var(--orange-tint);
  --fg:          var(--ink);
  --fg-2:        var(--ink-soft);
  --fg-muted:    var(--muted);
  --primary:     var(--orange);
  --primary-hover: var(--orange-600);
  --on-primary:  #FFFFFF;
  --border:      var(--line);

  /* ---- Type ---- */
  --font:        "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-eyebrow:  13px;
  --fs-cap:      13px;
  --fs-sm:       15px;
  --fs-base:     16px;
  --fs-lg:       18px;
  --fs-xl:       20px;
  --fs-h3:       clamp(20px, 5vw, 26px);
  --fs-h2:       clamp(26px, 7vw, 40px);
  --fs-h1:       clamp(32px, 9vw, 56px);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --lh-tight:    1.08;
  --lh-snug:     1.3;
  --lh-body:     1.55;

  /* ---- Spacing (8pt rhythm) ---- */
  --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: 56px; --s-10: 72px; --s-11: 96px;

  --gutter:    18px;
  --max-w:     1120px;
  --max-w-narrow: 640px;
  --section-y: clamp(40px, 9vw, 80px);

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Elevation (flat: minimal) ---- */
  --sh-1: 0 1px 2px rgba(20,24,31,0.06);
  --sh-2: 0 6px 20px -10px rgba(20,24,31,0.18);
  --sh-bar: 0 -2px 16px -6px rgba(20,24,31,0.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 240ms;

  /* ---- Fixed bars ---- */
  --bottombar-h: 68px;
}