/* ============================================================
 * RootRS Design System — Colors & Typography tokens
 * ============================================================ */

@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;
  --roots-light:        #D62953;
  --action-red:         #AF0000;
  --roots-deep:         #7C0000;
  --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;
  --gray-50-dark:       #9E9E9E;

  /* ---- App backgrounds ----------------------------------- */
  --bg-app:             #FFF8F8;
  --bg-app-desktop:     #F8F8F8;
  --bg-surface:         #FFFFFF;
  --bg-elevated:        #FAFAFA;
  --bg-deep:            #181818;

  /* ---- Semantic ------------------------------------------ */
  --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 --------------------------------- */
  --mustard-yellow:  #F4A00B;
  --lime-green:      #81C341;
  --forest-green:    #6F7C4D;
  --magenta:         #C42D82;
  --utility-charcoal:#3F3F3F;

  /* ---- Neutrals ------------------------------------------ */
  --black:    #000000;
  --gray-70:  #242729;
  --gray-60:  #3F3F3F;
  --gray-50:  #707070;
  --gray-40:  #CCCCCC;
  --gray-30:  #E8E8E8;
  --gray-20:  #F2F2F2;
  --gray-10:  #F5F5F5;
  --white:    #FFFFFF;

  /* ---- 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);
  --frosted-gray-2:     rgba(156,156,156,0.45);
  --frosted-white:      rgba(255,255,255,0.95);
  --transparent-roots:  rgba(153,30,59,0.90);
  --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;
  --font-script:    "Caveat", "Brush Script MT", cursive;
  --font-subtle:    "Manrope", "Montserrat", system-ui, sans-serif;
  --font-wordmark:  "Roboto", system-ui, sans-serif;

  /* ---- Type scale ---------------------------------------- */
  --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;
  --fs-body-2:    12px;   --lh-body-2: 1.5;
  --fs-eyebrow:   11px;   --lh-eyebrow: 1.5;
  --fs-utility:   10px;   --lh-utility: 1.5;
  --fs-hero:      48px;   --lh-hero: 1.0;

  /* ---- Spacing ------------------------------------------- */
  --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;

  /* ---- Radii --------------------------------------------- */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl:32px;
  --r-pill: 999px;
  --r-full: 9999px;

  /* ---- Shadows ------------------------------------------- */
  --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);

  /* ---- 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;
}