/* ============================================================
   Erobella — Colors & Type foundation
   Source of truth for CSS variables. Import in every preview/UI kit.

   DEPLOY NOTE (2026-09-16): this is the design project's colors_and_type.css
   verbatim, with ONE change — the 60+ local @font-face rules pointing at
   fonts/Inter_*.ttf have been replaced by the Google Fonts Inter family.
   The design project ships ~60 TTFs that cannot be pulled through the design
   API (256 KiB per-file cap), and Inter from Google is the same typeface at
   the same weights. Everything below the font block is unmodified.
   To go back to self-hosted fonts: drop the TTFs into /root/ratecard/fonts/
   and restore the @font-face block from the design project.
   ============================================================ */

/* Didot is used ONLY for the EROBELLA wordmark (caps, bold, tracked). */
@import url("https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap");
/* Inter — 400/500/600/700/800 are the weights this page actually uses. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* The design system declares a separate display family; the rate card renders
   everything through --font-sans, so Inter covers both. Kept as an alias so
   any component copied in from the kit still resolves. */
@font-face{font-family:"Inter Display";src:local("Inter");font-weight:600 900;font-style:normal;font-display:swap}

:root {
  /* -------- Brand (the signature pink→coral gradient) -------- */
  --eb-pink:       rgb(231, 64, 124);   /* #E7407C — primary start */
  --eb-coral:      rgb(239, 128, 94);   /* #EF805E — primary end   */
  --eb-pink-2:     rgb(233, 75, 120);   /* alt pink stroke/text    */
  --eb-pink-3:     rgb(234, 85, 115);   /* softer pink fill        */
  --eb-coral-2:    rgb(239, 123, 97);   /* alt coral               */
  --eb-gold:       rgb(247, 200, 56);   /* gold tier / verified    */
  --eb-gold-ink:   rgb(70, 47, 0);      /* text on gold            */
  --eb-gold-stroke:rgb(231, 175, 57);
  --eb-green:      rgb(129, 191, 100);  /* available / online      */
  --eb-blue:       rgb(32, 78, 207);    /* info / link accents     */
  --eb-error:      rgb(233, 75, 75);
  --eb-error-bg:   rgb(253, 237, 237);

  --eb-gradient:   linear-gradient(180deg, var(--eb-pink) 0%, var(--eb-coral) 100%);
  --eb-gradient-h: linear-gradient(90deg,  var(--eb-pink) 0%, var(--eb-coral) 100%);

  /* -------- Neutrals (warm off-white + warm greys) -------- */
  --eb-ink:        rgb(0, 0, 0);         /* primary text            */
  --eb-ink-2:      rgb(3, 7, 18);        /* near-black (display)    */
  --eb-ink-3:      rgb(58, 57, 50);      /* secondary text, warm    */
  --eb-ink-4:      rgb(107, 114, 128);   /* tertiary text           */
  --eb-mute:       rgb(156, 156, 152);   /* placeholder / muted     */
  --eb-hair:       rgb(228, 226, 215);   /* hairline / button brdr  */
  --eb-hair-2:     rgb(236, 234, 228);   /* card / input hairline   */
  --eb-hair-3:     rgb(243, 244, 246);   /* faintest divider        */
  --eb-paper:      rgb(251, 250, 247);   /* app background (warm)   */
  --eb-paper-2:    rgb(248, 248, 245);   /* section bg              */
  --eb-paper-3:    rgb(246, 245, 242);   /* input fill / banner bg  */
  --eb-card:       rgb(255, 255, 255);   /* card / surface          */
  --eb-invert:     rgb(29, 28, 23);      /* dark banner / top bar   */

  /* -------- Semantic text tokens -------- */
  --fg-1: var(--eb-ink);
  --fg-2: var(--eb-ink-3);
  --fg-3: var(--eb-ink-4);
  --fg-muted: var(--eb-mute);
  --fg-on-brand: #fff;
  --fg-on-gold: var(--eb-gold-ink);

  /* -------- Semantic surfaces -------- */
  --bg-app:    var(--eb-paper);
  --bg-card:   var(--eb-card);
  --bg-input:  var(--eb-paper-3);
  --bg-section:var(--eb-paper-2);
  --bg-dark:   var(--eb-invert);
  --border-1:  var(--eb-hair-2);
  --border-2:  var(--eb-hair);
  --border-faint: var(--eb-hair-3);

  /* -------- Shadows (one flat lift only; the system is low-elevation) -------- */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
  --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
  --shadow-dark: 0 -32px 64px 0 rgba(0, 0, 0, 0.10); /* used on sticky top banner */

  /* -------- Radii (three steps, generous) -------- */
  --radius-sm: 8px;    /* chips, tiny pills       */
  --radius-md: 12px;   /* cards, tags             */
  --radius-lg: 16px;   /* inputs, desktop buttons */
  --radius-xl: 24px;   /* mobile buttons + search */
  --radius-pill: 999px;

  /* -------- Spacing (4 / 8 grid) -------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* -------- Type -------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-wordmark: "Didot", "GFS Didot", "Bodoni 72", "Bodoni MT", "Hoefler Text", Garamond, "Times New Roman", serif;
  --t-wordmark: 700 22px/1 var(--font-wordmark);

  /* Display / hero headlines (desktop & mobile share the family, just scale) */
  --t-display-lg: 700 48px/56px var(--font-sans);   /* desktop hero   */
  --t-display-md: 700 32px/40px var(--font-sans);   /* mobile hero    */
  --t-h1:         700 22px/28px var(--font-sans);
  --t-h2:         700 18px/24px var(--font-sans);   /* section head   */
  --t-h3:         700 16px/24px var(--font-sans);   /* card title     */
  --t-body:       500 14px/24px var(--font-sans);
  --t-body-sm:    500 12px/16px var(--font-sans);
  --t-label:      600 14px/16px var(--font-sans);
  --t-cta:        700 16px/16px var(--font-sans);
  --t-cta-sm:     700 14px/16px var(--font-sans);
  --t-caption:    700 12px/16px var(--font-sans);
  --t-micro:      700 10px/16px var(--font-sans);   /* top-bar chips, errors */
}

/* ------------------------------------------------------------
   Semantic element defaults — opt in by adding `eb-scope` to a root.
   Keeps neutral HTML unstyled and prevents clobbering of previews.
   ------------------------------------------------------------ */
.eb-scope {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.eb-scope h1 { font: var(--t-display-md); color: var(--eb-ink-2); margin: 0; }
.eb-scope h2 { font: var(--t-h2); margin: 0; }
.eb-scope h3 { font: var(--t-h3); margin: 0; }
.eb-scope p  { font: var(--t-body); color: var(--fg-1); margin: 0; }
.eb-scope small { font: var(--t-body-sm); color: var(--fg-2); }
.eb-scope a { color: var(--eb-pink-2); text-decoration: none; }
.eb-scope a:hover { text-decoration: underline; }

/* Utility — the brand gradient as text or icon fill */
.eb-gradient-text {
  background: var(--eb-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eb-gradient-bg { background: var(--eb-gradient); }