/* =========================================================================
   TLC_TRNG, LLC — Brand Design System entry stylesheet
   v2 accent update: gold retired, utility classes read from the azure/cyan
   accent pair. Diff vs v1: .tlc-callout border → azure-deep; .tlc-pill → cyan
   (signal); .tlc-list dot → azure; .tlc-step-num → azure; .tlc-cream-section →
   .tlc-mist-section (cool light gray); three new helpers added
   (.tlc-pill--azure, .tlc-step-num--live, .tlc-stat--live).
   ========================================================================= */

@import "./fonts/fonts.css";
@import "./tokens/colors.css";

/* -------------------------------------------------------------------------
   Base — typography defaults (DRAFT per brand doc §2)
   Headers: Montserrat 600–900.  Body: Open Sans 400/600.
   ------------------------------------------------------------------------- */

:root {
  --tlc-font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tlc-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
  font-family: var(--tlc-font-body);
  color: var(--tlc-text);
  background: var(--tlc-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tlc-font-heading);
  color: var(--tlc-navy);
  font-weight: 700;
  line-height: 1.2;
}

/* Links are interactive → signal role, deep value for on-white legibility */
a { color: var(--tlc-cyan-deep); }
a:hover { color: var(--tlc-azure-deep); }

/* -------------------------------------------------------------------------
   Brand utility classes (DRAFT — candidate component patterns, doc §5).
   ------------------------------------------------------------------------- */

/* Navy section header with white centered text */
.tlc-section-header {
  background: var(--tlc-navy);
  color: var(--tlc-white);
  text-align: center;
  font-family: var(--tlc-font-heading);
  font-weight: 700;
  padding: 1rem 1.25rem;
}

/* Light-blue spec card: small uppercase label above a bold value */
.tlc-spec-card {
  background: var(--tlc-light-blue);
  color: var(--tlc-navy-deep);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.tlc-spec-card__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tlc-gray);
}
.tlc-spec-card__value {
  font-family: var(--tlc-font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--tlc-navy);
}

/* Live stat panel — signal role, for use on navy / navy-deep only */
.tlc-stat--live {
  background: rgba(111, 242, 255, 0.10);
  border: 1px solid rgba(111, 242, 255, 0.45);
  border-radius: 8px;
  padding: 0.75rem 0.875rem;
  box-shadow: 0 0 18px rgba(111, 242, 255, 0.18);
}
.tlc-stat--live .tlc-spec-card__label { color: var(--tlc-cyan); }
.tlc-stat--live .tlc-spec-card__value {
  color: var(--tlc-cyan);
  text-shadow: var(--tlc-cyan-glow-soft);
}

/* White callout card with a 4px azure left border (structural) */
.tlc-callout {
  background: var(--tlc-white);
  border-left: 4px solid var(--tlc-azure-deep);
  padding: 0.875rem 1.125rem;
  box-shadow: 0 1px 3px rgba(8, 25, 55, 0.08);
  border-radius: 4px;
}

/* Cyan pill / CTA — navy-deep text on cyan, glowing. Interactive only. */
.tlc-pill {
  display: inline-block;
  background: var(--tlc-cyan);
  color: var(--tlc-navy-deep);
  font-family: var(--tlc-font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  box-shadow: var(--tlc-cyan-glow);
}
/* Non-interactive label pill — azure, never glows */
.tlc-pill--azure {
  background: var(--tlc-azure);
  font-weight: 600;
  box-shadow: none;
}

/* Azure-dot bulleted list with italic gray descriptions */
.tlc-list { list-style: none; padding-left: 0; margin: 0; }
.tlc-list > li { position: relative; padding-left: 1.25rem; margin: 0.5rem 0; }
.tlc-list > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tlc-azure);
}
.tlc-list .tlc-desc { display: block; color: var(--tlc-gray); font-style: italic; }

/* Numbered azure circle (process steps) — structural, filled, no glow */
.tlc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--tlc-azure);
  color: var(--tlc-navy-deep);
  font-family: var(--tlc-font-heading);
  font-weight: 700;
}
/* Current/active step — signal role: outlined cyan with glow, on dark only */
.tlc-step-num--live {
  background: transparent;
  border: 2px solid var(--tlc-cyan);
  color: var(--tlc-cyan);
  box-shadow: var(--tlc-cyan-glow), inset 0 0 10px rgba(111, 242, 255, 0.25);
}

/* Neutral section wrapper (pause / insight) — cool light gray */.tlc-mist-section { background: var(--tlc-mist); color: var(--tlc-text); }
/* Deprecated alias — remove once markup is migrated */
.tlc-cream-section { background: var(--tlc-mist); color: var(--tlc-text); }

/* -------------------------------------------------------------------------
   Status — functional state only. Flat (never glows), always paired with a
   text label or icon so state never depends on color alone.
   .tlc-status = on white/mist.  .tlc-status--on-dark = on navy / navy-deep.
   ------------------------------------------------------------------------- */

.tlc-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--tlc-font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.tlc-status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.tlc-status--success { color: var(--tlc-success-deep); }
.tlc-status--warn    { color: var(--tlc-warn-deep); }
.tlc-status--error   { color: var(--tlc-error-deep); }
.tlc-status--info    { color: var(--tlc-info-deep); }

.tlc-status--on-dark.tlc-status--success { color: var(--tlc-success); }
.tlc-status--on-dark.tlc-status--warn    { color: var(--tlc-warn); }
.tlc-status--on-dark.tlc-status--error   { color: var(--tlc-error); }
.tlc-status--on-dark.tlc-status--info    { color: var(--tlc-info); }

/* Status banner on light backgrounds — 4px left border, tinted field */
.tlc-banner {
  border-left: 4px solid var(--tlc-info-deep);
  background: var(--tlc-mist);
  color: var(--tlc-text);
  padding: 0.875rem 1.125rem;
  border-radius: 4px;
}
.tlc-banner--success { border-left-color: var(--tlc-success-deep); background: rgba(61, 220, 132, 0.10); }
.tlc-banner--warn    { border-left-color: var(--tlc-warn-deep);    background: rgba(255, 160, 51, 0.12); }
.tlc-banner--error   { border-left-color: var(--tlc-error-deep);   background: rgba(185, 28, 28, 0.08); }

/* -------------------------------------------------------------------------
   Print — glow does not print. Flatten signal elements to the deep value.
   ------------------------------------------------------------------------- */

@media print {
  .tlc-pill,
  .tlc-stat--live,
  .tlc-step-num--live { box-shadow: none; }
  .tlc-pill { background: var(--tlc-cyan-deep); color: var(--tlc-white); }
  .tlc-stat--live { background: var(--tlc-white); border-color: var(--tlc-cyan-deep); }
  .tlc-stat--live .tlc-spec-card__label,
  .tlc-stat--live .tlc-spec-card__value { color: var(--tlc-cyan-deep); text-shadow: none; }
  .tlc-step-num--live { border-color: var(--tlc-cyan-deep); color: var(--tlc-cyan-deep); }
  .tlc-status--on-dark.tlc-status--success { color: var(--tlc-success-deep); }
  .tlc-status--on-dark.tlc-status--warn    { color: var(--tlc-warn-deep); }
  .tlc-status--on-dark.tlc-status--error   { color: var(--tlc-error-deep); }
  .tlc-status--on-dark.tlc-status--info    { color: var(--tlc-info-deep); }
}