/* ============================================================
   ELEMENTS — Design System Foundations
   colors_and_type.css
   Brand: Elements (workwithelements.com) — zero-to-10 growth agency
   Typeface: Inter (loaded via <link> in the page head)
   ============================================================ */

:root {
  /* ---------- CORE PALETTE ---------- */
  /* Lime is THE brand colour — the signal green that says "Elements". */
  --lime:        #CEFE44;   /* rgb(206,254,68)  primary accent / hero fields   */
  --pink:        #FFB0DA;   /* rgb(255,176,218) secondary accent / playful      */
  --coral:       #FD5A81;   /* rgb(253,90,129)  hot accent, gradient end        */
  --navy:        #02006C;   /* rgb(2,0,108)     deep accent / dark panels        */
  --periwinkle:  #D7CFFF;   /* rgb(215,207,255) soft tint panel                 */

  /* ---------- INK & PAPER ---------- */
  --ink:         #070508;   /* rgb(7,5,8)       primary text, near-black         */
  --black:       #000000;   /* true black — logo mark, strong fills             */
  --cream:       #FFFEF3;   /* rgb(255,254,243) signature off-white paper        */
  --white:       #FFFFFF;

  /* ---------- NEUTRAL SUPPORT ---------- */
  --grey-900:    #2C272F;   /* rgb(44,39,47)    secondary ink                    */
  --grey-500:    #767676;   /* rgb(118,118,118) muted text                       */
  --grey-200:    #D8D8D8;   /* rgb(216,216,216) image placeholder / hairline     */

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:          var(--cream);
  --fg1:         var(--ink);     /* primary text          */
  --fg2:         var(--grey-900);/* secondary text        */
  --fg3:         var(--grey-500);/* muted / captions      */
  --accent:      var(--lime);
  --on-accent:   var(--ink);     /* text on lime          */
  --on-dark:     var(--cream);   /* text on ink/navy      */
  --hairline:    rgba(7,5,8,0.12);

  /* ---------- SIGNATURE GRADIENTS ---------- */
  --grad-lime:   linear-gradient(180deg, #CEFE44 0%, #FFFEF3 100%);
  --grad-pink:   linear-gradient(180deg, #FFB0DA 0%, #FD5A81 100%);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Brand signature: tight tracking everywhere, ultra-tight on display */
  --track-display: -0.05em;
  --track-body:    -0.01em;
  --track-cta:      0.00em;
  --leading-display: 0.9;   /* display headings sit TIGHT */
  --leading-body:    1.5;   /* body breathes              */

  /* ---------- TYPE SCALE (desktop) ---------- */
  --fs-hero:    clamp(56px, 7vw, 104px);  /* "We're your zero to 10 growth agency" */
  --fs-h1:      clamp(40px, 5vw, 66px);
  --fs-h2:      clamp(30px, 3.4vw, 44px);
  --fs-h3:      28px;
  --fs-stat:    clamp(64px, 9vw, 130px);  /* big stat numerals (+34%, 2068) */
  --fs-lead:    clamp(18px, 1.4vw, 22px); /* intro paragraph */
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-caption: 12px;

  /* ---------- RADII ---------- */
  /* Two distinct families: big soft cards, and tight link-buttons. */
  --r-card:    24px;   /* brand cards / panels (scales up to ~34px on large)  */
  --r-card-lg: 32px;
  --r-pill:    999px;  /* chips, tag buttons, primary pills                    */
  --r-link:    6px;    /* small nav links / web CTAs                           */
  --r-img:     12px;   /* inner image wells                                    */

  /* ---------- SHADOWS ---------- */
  /* Soft, double-layered, low-opacity — never harsh. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.10);
  --shadow-md: 0 1.75px 3.5px rgba(0,0,0,0.06), 0 1.75px 5.25px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);

  /* ---------- BORDERS ---------- */
  --border-ink: 1.5px solid var(--ink);

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  220ms;

  /* The X mark as an inline data-URI (solid fill) for use as a CSS mask. */
  --mark-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 289.093 289.093"><path d="M 277.096 71.012 C 293.09 55.018 293.105 29.101 277.067 13.061 L 276.032 12.026 C 260.021 -3.985 234.062 -3.981 218.081 11.998 L 173.507 56.572 C 157.512 72.566 131.565 72.55 115.587 56.572 L 71.012 11.998 C 55.018 -3.997 29.101 -4.011 13.061 12.026 L 12.026 13.061 C -3.985 29.072 -3.981 55.031 11.998 71.012 L 56.572 115.587 C 72.566 131.581 72.55 157.528 56.572 173.507 L 11.998 218.081 C -3.997 234.075 -4.011 259.993 12.026 276.032 L 13.061 277.067 C 29.072 293.078 55.031 293.074 71.012 277.096 L 115.587 232.521 C 131.581 216.527 157.528 216.543 173.507 232.521 L 218.081 277.096 C 234.075 293.09 259.993 293.105 276.032 277.067 L 277.067 276.032 C 293.078 260.021 293.074 234.062 277.096 218.081 L 232.521 173.507 C 216.527 157.512 216.543 131.565 232.521 115.587 L 277.096 71.012 Z" fill="black" fill-rule="evenodd"/></svg>');
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.e-hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  color: var(--fg1);
  text-wrap: balance;
}
.e-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 0.95;
  letter-spacing: var(--track-display);
  color: var(--fg1);
  text-wrap: balance;
}
.e-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--fg1);
}
.e-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--fg1);
}
.e-stat {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-stat);
  line-height: 0.9;
  letter-spacing: var(--track-display);
  color: var(--fg1);
}
.e-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  color: var(--fg1);
}
.e-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  color: var(--fg2);
}
.e-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg3);
}
.e-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg2);
}
/* The X mark — recolourable via `color`. Uses an inline data-URI mask so it
   resolves no matter where the HTML lives. */
.e-mark {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--mark-url) center / contain no-repeat;
  mask: var(--mark-url) center / contain no-repeat;
}

/* Wordmark — lowercase, tight, bold */
.e-wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  color: var(--ink);
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.e-card {
  background: var(--cream);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}
.e-card--outline {
  background: var(--cream);
  border: var(--border-ink);
  border-radius: var(--r-card);
  box-shadow: none;
}

/* Pill button — the big friendly CTA */
.e-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: var(--track-body);
  padding: 16px 28px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.e-btn--lime  { background: var(--lime);  color: var(--ink); }
.e-btn--ink   { background: var(--ink);   color: var(--cream); }
.e-btn:hover  { filter: brightness(0.96); }
.e-btn:active { transform: scale(0.97); }

/* Small web link-button (nav / footer) — tight radius, arrow */
.e-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
  padding: 10px 19px;
  border-radius: var(--r-link);
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.e-link--lime  { background: var(--lime);  color: var(--ink); }
.e-link--cream { background: var(--cream); color: var(--ink); }
/* Not a link — a status pill on a card whose page isn't public yet. */
.e-link--muted { background: transparent; color: var(--fg3); border: 1.5px dashed var(--grey-200); }
.e-link:hover  { filter: brightness(0.94); }
.e-link:active { transform: scale(0.97); }

/* Capability chip / tag — pill, filled, optional ink border */
.e-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.e-chip--lime  { background: var(--lime);       border-color: var(--ink); }
.e-chip--pink  { background: var(--pink);       border-color: var(--ink); }
.e-chip--coral { background: var(--coral);      border-color: var(--ink); color: var(--cream); }
.e-chip--navy  { background: var(--navy);       border-color: var(--navy); color: var(--cream); }
.e-chip--peri  { background: var(--periwinkle); border-color: var(--ink); }
.e-chip--ink   { background: var(--ink);        border-color: var(--ink); color: var(--cream); }