/* The Lindsey Effect brand sheet (docs/specs/brand-sheet.md). One source for fonts, colors and buttons.
   Pages link this file and use the tokens; nothing else should define its own plum, gold or button shape. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap");
:root{
  --tle-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --tle-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --tle-plum:#4A1237; --tle-gold:#C99B3C; --tle-ink:#14100F; --tle-white:#FFFFFF; --tle-soft:#F7F5F6; --tle-line:#ECE4E9;
  /* Studio jewel tones: a gradient from mid to deep, numeral in the tint. */
  --tle-plan-mid:#5B1240; --tle-plan-deep:#2A0820; --tle-plan-tint:#E3A9CC;
  --tle-challenge-mid:#7C1430; --tle-challenge-deep:#2E0611; --tle-challenge-tint:#F2A7B8;
  --tle-vault-mid:#0F5640; --tle-vault-deep:#05261D; --tle-vault-tint:#9FD8BF;
  --tle-handled-mid:#1C2E66; --tle-handled-deep:#0A1230; --tle-handled-tint:#AEBFEF;
  --tle-radius-btn:999px;
}
.tle-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:var(--tle-radius-btn);font:700 .92rem/1.2 var(--tle-body);text-transform:none;letter-spacing:0;text-decoration:none;border:1.5px solid var(--tle-plum);background:var(--tle-plum);color:#fff;cursor:pointer}
.tle-btn.outline{background:transparent;color:var(--tle-plum)}
.tle-on-dark .tle-btn,.tle-btn.gold{background:var(--tle-gold);border-color:var(--tle-gold);color:var(--tle-ink)}
/* The signature: a gold brush stroke under one word of each main headline. Keeps the headline's own font and color. */
.tle-stroke{background-image:linear-gradient(100deg,rgba(201,155,60,0) 0%,rgba(201,155,60,.62) 4%,rgba(201,155,60,.55) 92%,rgba(201,155,60,0) 100%);background-repeat:no-repeat;background-size:100% .28em;background-position:0 86%;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tle-stroke.on-gold{background-image:linear-gradient(100deg,rgba(255,248,238,0) 0%,rgba(255,248,238,.28) 4%,rgba(255,248,238,.24) 92%,rgba(255,248,238,0) 100%)}

/* Studio jewel tones (brand step 4). Any element with data-studio="<id>" (or data-id on studio cards) gets its studio's
   tokens; .tle-jewel paints the gradient with pearl text. Gold is not used on these. */
[data-studio="the-plan-studio"],[data-id="the-plan-studio"],#the-plan-studio{--j-mid:var(--tle-plan-mid);--j-deep:var(--tle-plan-deep);--j-tint:var(--tle-plan-tint);--j-hi:rgba(176,74,135,.55);--j-num:"I"}
[data-studio="the-challenge-studio"],[data-id="the-challenge-studio"],#the-challenge-studio{--j-mid:var(--tle-challenge-mid);--j-deep:var(--tle-challenge-deep);--j-tint:var(--tle-challenge-tint);--j-hi:rgba(214,84,118,.5);--j-num:"II"}
[data-studio="vault-builder"],[data-id="vault-builder"],#vault-builder{--j-mid:var(--tle-vault-mid);--j-deep:var(--tle-vault-deep);--j-tint:var(--tle-vault-tint);--j-hi:rgba(74,160,124,.5);--j-num:"III"}
[data-studio="handled"],[data-id="handled"],#handled{--j-mid:var(--tle-handled-mid);--j-deep:var(--tle-handled-deep);--j-tint:var(--tle-handled-tint);--j-hi:rgba(98,128,204,.5);--j-num:"IV"}
.tle-jewel{position:relative;isolation:isolate;color:#fbf6ee;background:radial-gradient(120% 90% at 85% 0%,var(--j-hi) 0%,transparent 55%),linear-gradient(160deg,var(--j-mid) 0%,var(--j-deep) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.tle-jewel-num{font:italic 700 1.7rem/1 var(--tle-display);color:var(--j-tint)}
.tle-jewel-num::before{content:var(--j-num)}
.tle-jewel-line{height:1px;background:linear-gradient(90deg,rgba(255,248,238,.55),rgba(255,248,238,0))}