/* ============================================================
   ellefi · Estúdio de Design — Design Tokens
   Brand: studioellefi.com.br
   Source of truth: "Propostas Comerciais.fig"
   ============================================================ */

/* Montserrat is the brand typeface. Local files supplied by the studio
   (Regular 400, Bold 700, ExtraBold 800) are served from /fonts. The
   Google Fonts @import is kept as a supplement so the Black 900 (section
   heads) and Medium 500 weights still load — add those .ttf files to
   /fonts and a matching @font-face to go fully offline. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,900;1,400;1,800&display=swap');
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('fonts/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 800;
  font-display: swap; src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype');
}

:root {
  /* ---------- CORE PALETTE ---------- */
  --ink:            rgb(29, 29, 27);    /* #1D1D1B — primary dark background */
  --ink-pure:       rgb(0, 0, 0);       /* #000000 — flow-image black field   */
  --paper:          rgb(247, 247, 247); /* #F7F7F7 — light "card" sections     */
  --white:          rgb(255, 255, 255); /* #FFFFFF — text on dark              */

  /* ---------- BRAND PURPLE ---------- */
  --purple:         rgb(125, 31, 255);  /* #7D1FFF — PRIMARY brand purple      */
  --purple-bright:  rgb(169, 30, 255);  /* #A91EFF — gradient / accent         */
  --purple-deep:    rgb(80, 32, 255);   /* #5020FF — gradient start (blue-ish) */
  --purple-soft:    rgb(180, 128, 255); /* #B480FF — gradient mid / tints      */
  --lavender:       rgb(239, 234, 255); /* #EFEAFF — light tint fill           */
  --lavender-mute:  rgb(190, 186, 203); /* #BEBACB — muted lavender-grey       */

  /* ---------- SUCCESS / PRICE GREEN ---------- */
  --green:          rgb(0, 183, 0);     /* #00B700 — price emphasis, "GRÁTIS"  */
  --green-muted:    rgb(55, 174, 39);   /* #37AE27 — secondary price / labels  */

  /* ---------- NEUTRALS / TEXT ---------- */
  --grey-1:         rgb(166, 166, 166); /* #A6A6A6 — captions, dividers, links */
  --grey-2:         rgb(142, 142, 142); /* #8E8E8E — muted text                */
  --grey-3:         rgb(134, 134, 134); /* #868686 — icon fills                */
  --grey-line:      rgb(217, 217, 217); /* #D9D9D9 — image placeholder grey    */

  /* ---------- GLASS CARD (on dark) ---------- */
  --glass-fill:     rgba(83, 78, 78, 0.10);
  --glass-border:   rgb(69, 69, 69);    /* #454545 */
  --glass-blur:     35px;

  /* ---------- GRADIENTS ---------- */
  /* The signature "validity pill" / orb gradient */
  --grad-orb:       radial-gradient(circle at 50% 50%,
                       var(--purple-deep) 0%,
                       var(--purple-soft) 49%,
                       var(--purple-bright) 100%);
  --grad-pill-edge: radial-gradient(var(--white) 0%, var(--purple-bright) 100%);

  /* ---------- TYPE FAMILY ---------- */
  --font-sans:      'Montserrat', system-ui, sans-serif;

  /* ---------- WEIGHTS ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-xbold:   800;   /* ExtraBold — "COMERCIAL", labels                */
  --w-black:   900;   /* Black — the heavy second line of section heads */

  /* ---------- RADII ---------- */
  --r-chip:    9px;    /* glass timeline / step cards            */
  --r-card:    15px;   /* pills, mid containers                  */
  --r-panel:   50px;   /* big white doc panels                   */
  --r-img-top: 10px;   /* image cards: 10px top / 50px bottom    */

  /* ---------- DOC GEOMETRY ---------- */
  --doc-width: 1080px; /* proposal canvas width                  */
  --pad-x:     103px;  /* standard horizontal inset on dark      */
}

/* ============================================================
   TYPE SCALE  (proposal canvas is 1080px wide; sizes are literal)
   line-height in the source is almost always 100%.
   ============================================================ */
:root {
  --t-hero:     150px; /* giant display numeral (rare)            */
  --t-display:  50px;  /* section heads, big price                */
  --t-title:    40px;  /* "Quem está por trás", "COMERCIAL"       */
  --t-h:        35px;  /* sub-titles / client name                */
  --t-body:     30px;  /* DEFAULT body & list items               */
  --t-cue:      25px;  /* labels, payment methods, footer line    */
  --t-small:    22px;  /* OBS / fine print                        */
  --t-caption:  20px;  /* site url, captions, dividers label      */
}

/* ---- Semantic helpers (use on dark canvas unless noted) ---- */
.el-section-head {
  font-family: var(--font-sans);
  font-size: var(--t-display);
  line-height: 1;
  text-align: center;
  color: var(--white);
}
.el-section-head .lead  { font-weight: var(--w-regular); display: block; }
.el-section-head .heavy { font-weight: var(--w-black);   display: block; }

.el-title  { font-family: var(--font-sans); font-weight: var(--w-xbold);
             font-size: var(--t-title); line-height: 1; }
.el-body   { font-family: var(--font-sans); font-weight: var(--w-regular);
             font-size: var(--t-body); line-height: 1.1; }
.el-cue    { font-family: var(--font-sans); font-weight: var(--w-regular);
             font-size: var(--t-cue);  line-height: 1; }
.el-caption{ font-family: var(--font-sans); font-weight: var(--w-regular);
             font-size: var(--t-caption); color: var(--grey-1); }
.el-em     { font-style: italic; font-weight: var(--w-semi); }
.el-price  { font-family: var(--font-sans); font-weight: var(--w-bold);
             color: var(--green); line-height: 1; }