/* ============================================================
 * RootRS Design System — Colors & Typography tokens
 * Source of truth: Figma "Roots App.fig" → /Colors/Color-Guide
 *                                       → /Typography/Type-Scale
 * ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700&family=Caveat:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&display=swap");

:root {
  /* ---- Brand / Primary ----------------------------------- */
  --roots-primary:      #991E3B;   /* the brand maroon */
  --roots-light:        #D62953;   /* warm pink-red */
  --action-red:         #AF0000;   /* destructive / errors */
  --roots-deep:         #7C0000;   /* deepest red, on press */
  --personable-roots:   linear-gradient(180deg, #D62953 0%, #991E3B 100%);
  --hero-gradient:      linear-gradient(180deg, #E67F97 0%, #991E3B 100%);

  /* ---- Dark / surface bases ------------------------------ */
  --gray-20-new:        #1F222A;   /* almost-black surface */
  --gray-50-dark:       #9E9E9E;

  /* ---- App backgrounds ----------------------------------- */
  --bg-app:             #FFF8F8;   /* the soft-pink mobile canvas */
  --bg-app-desktop:     #F8F8F8;   /* desktop canvas (near-white) */
  --bg-surface:         #FFFFFF;
  --bg-elevated:        #FAFAFA;   /* near-white */
  --bg-deep:            #181818;   /* near-black */

  /* ---- Semantic (30 = saturated, 10 = soft wash) --------- */
  --red-30:    #BA140F;   --red-10:    #FEF0F0;
  --blue-30:   #005EA1;   --blue-10:   #EFFAFF;
  --green-30:  #2F8532;   --green-10:  #F9FDF2;
  --orange-30: #CC3000;   --orange-10: #FFF3E5;

  /* ---- Secondary accents (used sparingly) ---------------- */
  --mustard-yellow:  #F4A00B;   /* promo CTAs e.g. "Book Your Service" */
  --lime-green:      #81C341;
  --forest-green:    #6F7C4D;
  --magenta:         #C42D82;
  --utility-charcoal:#3F3F3F;

  /* ---- Neutrals (gray-70 darkest → white) ---------------- */
  --black:    #000000;
  --gray-70:  #242729;   /* primary text */
  --gray-60:  #3F3F3F;
  --gray-50:  #707070;   /* secondary text */
  --gray-40:  #CCCCCC;   /* hairline / borders strong */
  --gray-30:  #E8E8E8;   /* hairline default */
  --gray-20:  #F2F2F2;
  --gray-10:  #F5F5F5;
  --white:    #FFFFFF;

  /* ---- Transparency / overlays --------------------------- */
  --transparent-gray:   rgba(250,250,250,0.98);
  --transparent-white:  rgba(255,255,255,0.98);
  --frosted-gray:       rgba(250,250,250,0.95);   /* + backdrop-blur: 8 */
  --frosted-gray-2:     rgba(156,156,156,0.45);   /* + backdrop-blur: 8 */
  --frosted-white:      rgba(255,255,255,0.95);   /* + backdrop-blur: 8 */
  --transparent-roots:  rgba(153,30,59,0.90);     /* + backdrop-blur: 8 */
  --overlay-scrim:      rgba(36,39,41,0.50);

  /* ---- Semantic role aliases ----------------------------- */
  --fg:                 var(--gray-70);
  --fg-muted:           var(--gray-50);
  --fg-subtle:          var(--gray-40);
  --fg-inverse:         var(--white);
  --fg-brand:           var(--roots-primary);
  --bg:                 var(--bg-app);
  --bg-card:            var(--white);
  --border:             var(--gray-30);
  --border-strong:      var(--gray-40);
  --border-brand:       var(--roots-primary);

  /* ---- Type families ------------------------------------- */
  --font-primary:   "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:   "Inter", "Montserrat", system-ui, sans-serif;       /* big "Hello, Karan" */
  --font-script:    "Caveat", "Brush Script MT", cursive;                /* handwritten accent */
  --font-subtle:    "Manrope", "Montserrat", system-ui, sans-serif;      /* secondary subtitles */
  --font-wordmark:  "Roboto", system-ui, sans-serif;                     /* "ROOTRS" label */

  /* ---- Type scale (desktop baseline 14px @ 1rem) ---------
   * Figma defines: 16px (1rem) baseline desktop/tablet,
   * 14px (1rem) baseline mobile. Values below are absolute px
   * so they translate identically on both. */
  --fs-h1:        29px;   --lh-h1: 1.1;
  --fs-h2:        25px;   --lh-h2: 1.1;
  --fs-h3:        22px;   --lh-h3: 1.1;
  --fs-h4:        20px;   --lh-h4: 1.2;
  --fs-h5:        18px;   --lh-h5: 1.2;
  --fs-h6:        16px;   --lh-h6: 1.2;
  --fs-body-1:    14px;   --lh-body-1: 1.5;   /* base */
  --fs-body-2:    12px;   --lh-body-2: 1.5;   /* labels */
  --fs-eyebrow:   11px;   --lh-eyebrow: 1.5;
  --fs-utility:   10px;   --lh-utility: 1.5;
  --fs-hero:      48px;   --lh-hero: 1.0;     /* "Hello, Karan" / "India, well taken care of." */

  /* ---- Spacing scale (8-pt with 4-pt halfsteps) ---------- */
  --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;

  /* ---- Corner radii ---------------------------------------
   * Mobile loves big rounded corners — sheet handles, cards,
   * buttons are 16-32px. Avatars/round buttons fully circular. */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md: 12px;
  --r-lg: 16px;       /* buttons, chips, inputs */
  --r-xl: 24px;
  --r-2xl:32px;       /* hero promo cards, sheet handles */
  --r-pill: 999px;    /* tags, status pills */
  --r-full: 9999px;

  /* ---- Elevation / shadows --------------------------------
   * Brand uses red-tinted shadows on hover-able cards to
   * carry warmth, plus a generic flat ambient shadow. */
  --shadow-ambient-sm: 0px 4px 12px rgba(4,6,15,0.05);
  --shadow-ambient:    0px 4px 60px rgba(4,6,15,0.08);
  --shadow-ambient-lg: 0px 4px 60px rgba(4,6,15,0.14);
  --shadow-brand-sm:   0px 4px 12px rgba(153,30,59,0.10);
  --shadow-brand:      4px 16px 32px rgba(153,30,59,0.20);
  --shadow-sheet:      0px -1px 33.8px -29px rgba(0,0,0,0.30),
                       0px 0px 8px 3px rgba(0,0,0,0.15);
  --shadow-shrunk:     0px 2px 4px rgba(0,0,0,0.05);     /* press */

  /* ---- Motion --------------------------------------------- */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* ---- Layout ---------------------------------------------- */
  --sidebar-w:    252px;    /* desktop sidebar fixed */
  --content-max:  1304px;
  --tap-target:   44px;     /* mobile minimum */
}

/* ============================================================
 * Semantic element styles — drop-in defaults
 * ============================================================ */

html, body { background: var(--bg); color: var(--fg); }

body, p, span, div, button, input, textarea, select {
  font-family: var(--font-primary);
  font-size: var(--fs-body-1);
  line-height: var(--lh-body-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-primary);
  font-weight: 800;                    /* H1-ExtraBold per Figma */
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.01em;
  color: var(--gray-70);
  margin: 0;
}
h2, .h2 { font-family: var(--font-primary); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--gray-70); margin: 0; }
h3, .h3 { font-family: var(--font-primary); font-weight: 800; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--gray-70); margin: 0; }
h4, .h4 { font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--gray-70); margin: 0; }
h5, .h5 { font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--gray-70); margin: 0; }
h6, .h6 { font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-h6); line-height: var(--lh-h6); color: var(--gray-70); margin: 0; }

.hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: -0.02em;
  color: var(--roots-primary);
}
.hero--ink { color: var(--gray-70); }
.script {                              /* the Caveat handwritten line */
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.0;
  letter-spacing: -0.5px;
  color: var(--roots-light);
}
.subtitle {                            /* Manrope soft body */
  font-family: var(--font-subtle);
  font-weight: 500;
  font-size: var(--fs-body-1);
  line-height: 1.45;
  color: var(--gray-70);
}
.body-1   { font-size: var(--fs-body-1);  line-height: var(--lh-body-1); }
.body-2   { font-size: var(--fs-body-2);  line-height: var(--lh-body-2); }
.label    { font-size: var(--fs-body-2);  line-height: var(--lh-body-2); font-weight: 600; }
.eyebrow  { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-50); }
.utility  { font-size: var(--fs-utility); line-height: var(--lh-utility); font-weight: 700; letter-spacing: 0.02em; }
.utility--caps { text-transform: uppercase; }

.price          { font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-h5); color: var(--gray-70); }
.price--strike  { text-decoration: line-through; color: var(--gray-50); font-weight: 400; font-size: var(--fs-utility); }

.link-cta {                            /* "see all" / "View Service" */
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-body-1);
  color: var(--roots-primary);
  text-decoration: none;
  cursor: pointer;
}
.link-cta:hover { color: var(--roots-light); }