/* ==========================================================================
   Essence design tokens
   Generated from Brand Guide v2.8, 9 September 2026.
   Source of truth: https://essence-brand-v2.vercel.app/guide

   Drop this in before your own stylesheet and use the variables.
   Do not hardcode a hex anywhere in the build. If a color is not in
   here, it is not in the brand.
   ========================================================================== */

:root {

  /* --- GROUND -------------------------------------------------------------
     These three are the brand. Cream is the page. Sand is the panel.
     Ink is every piece of text that is not on a color field.            */
  --es-cream:        #FFF7EC;
  --es-sand:         #EFE7DA;
  --es-ink:          #17121F;

  /* Supporting neutrals */
  --es-gray:         #5C544A;   /* body copy on cream */
  --es-muted:        #8A7E6E;   /* captions, meta, disabled */
  --es-rule:         #D8D2CB;   /* hairlines, borders */
  --es-on-dark:      #CFC7BC;   /* body copy on ink */

  /* --- ACCENTS ------------------------------------------------------------
     One job each. Using one for another job is the fastest way to break
     the system.                                                          */
  --es-lagoon:       #1B7D97;   /* ACTS.  Every clickable thing.          */
  --es-gold:         #FFC93C;   /* HIGHLIGHTS. Worth noticing, not clicking */
  --es-coral:        #E94938;   /* WARNS.  Urgency only. Used sparingly.  */
  --es-butter:       #FFE9B0;   /* Gold's tint, for panels and callouts   */

  /* Deep cuts. Required for any text under 18px on Cream.
     The surface colors above FAIL contrast at small sizes.              */
  --es-lagoon-deep:  #145E72;   /* 6.9:1 on cream */
  --es-coral-deep:   #C6321E;   /* 5.1:1 on cream */

  /* --- MOOD FIELDS --------------------------------------------------------
     Six moods. Each one fills the frame behind the product.
     ALL SIX carry Cream type on the field.                               */
  --es-refresh:      #E0792D;
  --es-focus:        #95B168;
  --es-breathe:      #1B7D97;   /* same value as Lagoon, by design */
  --es-relief:       #E76A7B;
  --es-relax:        #A5638F;
  --es-sleep:        #3A2568;

  /* Mood deep cuts. Use these when the mood color has to be TEXT on
     Cream rather than a field behind something.                          */
  --es-refresh-deep: #B35714;  /* derived here, not yet on a guide board */
  --es-focus-deep:   #5C7C24;
  --es-breathe-deep: #145E72;
  --es-relief-deep:  #BC2438;
  --es-relax-deep:   #7E3E68;
  --es-sleep-deep:   #3A2568;   /* already dark enough */

  /* --- TYPE ---------------------------------------------------------------  */
  --es-display:      'Bricolage Grotesque', 'Arial Black', Helvetica, Arial, sans-serif;
  --es-sans:         'Lato', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --es-serif:        Georgia, 'Times New Roman', serif;

  /* Approved weights. Bricolage ships nine; only 800 is approved. */
  --es-display-weight: 800;
  --es-body-weight:    400;
  --es-emphasis-weight:700;
  --es-label-weight:   900;

  /* Scale. Exact px flexes by medium; the RELATIONSHIPS do not. */
  --es-h1:           clamp(44px, 6.4vw, 72px);
  --es-h2:           clamp(30px, 4.2vw, 40px);
  --es-h3:           clamp(22px, 2.6vw, 31px);
  --es-h4:           13px;                 /* eyebrow, always caps */
  --es-product:      clamp(18px, 2vw, 28px);
  --es-body:         16px;
  --es-cta:          16px;
  --es-caption:      12px;

  /* The accent italic sits at 0.62 of the line it accents. This is the
     rule that stops it stealing the eye from the headline. */
  --es-accent-ratio: 0.62;

  /* Tracking */
  --es-track-h1:     -0.03em;
  --es-track-h2:     -0.02em;
  --es-track-label:  0.24em;   /* eyebrows only */

  /* Leading */
  --es-lead-h1:      1.06;
  --es-lead-accent:  1.2;
  --es-lead-body:    1.6;

  /* Below this size Bricolage stops reading as itself. Use Lato Black. */
  --es-display-floor: 15px;

  /* --- SHAPE -------------------------------------------------------------- */
  --es-radius-pill:  999px;    /* buttons are pills */
  --es-radius-card:  0px;      /* cards and fields are square */
  --es-measure:      68ch;     /* body copy never runs wider than 75 characters */
}

/* ==========================================================================
   CASE RULES. These are not decoration, they are the brand.
   ========================================================================== */

/* Headlines: sentence case. One capital, then lowercase. */
.es-h1, .es-h2, .es-h3 { text-transform: none; }

/* The six mood names are ALWAYS lowercase. This is the signature and
   it is the one thing that never changes. */
.es-mood { text-transform: lowercase; }

/* Product names take initial caps: Rest Easy, not Rest easy. */
.es-product-name { text-transform: none; }

/* Eyebrows and labels are the only place caps live. */
.es-eyebrow {
  font-family: var(--es-sans);
  font-weight: var(--es-label-weight);
  font-size: 11px;
  letter-spacing: var(--es-track-label);
  text-transform: uppercase;
}

/* ==========================================================================
   PATTERNS
   ========================================================================== */

.es-h1 {
  font-family: var(--es-display);
  font-weight: var(--es-display-weight);
  font-size: var(--es-h1);
  letter-spacing: var(--es-track-h1);
  line-height: var(--es-lead-h1);
}

/* The accent line. Stacked UNDER the headline, never beside it. */
.es-h1 em, .es-accent {
  font-family: var(--es-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--es-accent-ratio) * 1em);
  letter-spacing: 0;
  line-height: var(--es-lead-accent);
  color: var(--es-lagoon-deep);
}

.es-body {
  font-family: var(--es-sans);
  font-weight: var(--es-body-weight);
  font-size: var(--es-body);
  line-height: var(--es-lead-body);
  color: var(--es-gray);
  max-width: var(--es-measure);
}

.es-cta {
  display: inline-block;
  font-family: var(--es-sans);
  font-weight: var(--es-label-weight);
  font-size: var(--es-cta);
  padding: 15px 34px;
  border-radius: var(--es-radius-pill);
  background: var(--es-lagoon);
  color: var(--es-cream);
  text-decoration: none;
}

/* Coral and Gold carry INK type. Lagoon carries Cream. */
.es-cta--warn { background: var(--es-coral); color: var(--es-ink); }
.es-cta--gold { background: var(--es-gold);  color: var(--es-ink); }

/* Type over photography always sits on a scrim, never on bare image. */
.es-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(23,18,31,.42) 0%,
    rgba(23,18,31,0) 34%,
    rgba(23,18,31,0) 56%,
    rgba(23,18,31,.52) 100%);
}

/* Any column of numbers that stacks uses tabular figures. */
.es-price { font-variant-numeric: tabular-nums; }