/* =====================================================================
   TruHue Editorial — shared design system (v1, Nov 2026)
   Used by: homepage preview (via home-editorial.css) and TruHue Beauty Intelligence pages.
   Fonts (add to <head>):
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
   Not for interactive tools (score, checkers, dupe finder): they stay utility-first.
   ===================================================================== */

:root {
  /* Surfaces */
  --te-ivory: #FAF6F0;      /* page background */
  --te-ivory-2: #F3EDE4;    /* alternate band */
  --te-paper: #FFFFFF;      /* charts, inputs */
  --te-night: #1E1A17;      /* footer band, primary buttons */

  /* Text: all pass WCAG AA (4.5:1) on ivory */
  --te-ink: #1E1A17;        /* headlines, primary text   ~16:1 */
  --te-body: #4A4038;       /* paragraphs                ~9:1  */
  --te-muted: #6E6253;      /* captions, meta            ~5.6:1 */

  /* Accent: restrained. Labels, one italic word per headline, links, hover. Never a large fill. */
  --te-rose: #8F4A55;       /* ~6.6:1 on ivory */
  --te-rose-soft: #E9D6D9;  /* tiny tints only (focus rings, chips) */

  /* Lines */
  --te-rule: #D8CFC2;
  --te-rule-2: #E5DDD0;

  /* Verdicts: the site's existing colors, unchanged (YAY = homepage pill, OKAY/NAY = blog verdict colors) */
  --te-yay: #2D6A3F;
  --te-okay: #C8A85A;
  --te-nay: #B85450;

  /* Type */
  --te-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --te-sans: 'Public Sans', Helvetica, Arial, sans-serif;

  /* Type scale (desktop → mobile via clamp). Body never below 16px; meta never below 14px. */
  --te-size-display: clamp(2.4rem, 5vw, 4.1rem);   /* hero / report title */
  --te-size-h2: clamp(1.85rem, 3.4vw, 2.6rem);
  --te-size-h3: clamp(1.2rem, 1.8vw, 1.4rem);
  --te-size-lede: clamp(1.08rem, 1.5vw, 1.22rem);
  --te-size-body: 1.0625rem;                       /* 17px */
  --te-size-meta: 0.875rem;                        /* 14px */
  --te-size-label: 0.8rem;                         /* 12.8px, uppercase only */

  --te-measure: 40rem;      /* comfortable paragraph width */
  --te-radius: 2px;         /* buttons, inputs */
}

/* ---------- Reusable components (prefixed te- so they never collide with page CSS) ---------- */
.te-label { font-family: var(--te-sans); font-size: var(--te-size-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--te-rose); }
.te-display { font-family: var(--te-serif); font-optical-sizing: auto; font-weight: 500; font-size: var(--te-size-display); line-height: 1.06; letter-spacing: -0.015em; color: var(--te-ink); text-wrap: balance; }
.te-display em, .te-h2 em { font-style: italic; font-weight: 400; color: var(--te-rose); }
.te-h2 { font-family: var(--te-serif); font-weight: 500; font-size: var(--te-size-h2); line-height: 1.14; color: var(--te-ink); text-wrap: balance; }
.te-h3 { font-family: var(--te-sans); font-weight: 600; font-size: var(--te-size-h3); line-height: 1.35; color: var(--te-ink); }
.te-lede { font-size: var(--te-size-lede); color: var(--te-body); max-width: var(--te-measure); text-wrap: pretty; }
.te-meta { font-size: var(--te-size-meta); color: var(--te-muted); }
.te-rule { border: 0; border-top: 1px solid var(--te-rule); margin: 2rem 0; }

.te-btn { display: inline-block; font-family: var(--te-sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; line-height: 1.2;
  padding: 0.95rem 1.6rem; border-radius: var(--te-radius); border: 1px solid var(--te-ink); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.te-btn-primary { background: var(--te-ink); color: var(--te-ivory); }
.te-btn-primary:hover { background: var(--te-rose); border-color: var(--te-rose); color: #fff; }
.te-btn-secondary { background: transparent; color: var(--te-ink); }
.te-btn-secondary:hover { background: var(--te-ink); color: var(--te-ivory); }
.te-link { color: var(--te-ink); text-decoration: underline; text-decoration-color: var(--te-rule); text-underline-offset: 4px; }
.te-link:hover { color: var(--te-rose); text-decoration-color: var(--te-rose); }

.te-verdict { display: inline-block; font-family: var(--te-sans); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; color: #fff; padding: 0.3rem 0.7rem; border-radius: 999px; }
.te-verdict.yay { background: var(--te-yay); } .te-verdict.okay { background: var(--te-okay); color: var(--te-ink); } .te-verdict.nay { background: var(--te-nay); }

:focus-visible { outline: 2px solid var(--te-rose); outline-offset: 2px; }