/* ============================================================
   BASE — element resets + TechTally utility classes
   Ported from the production index.css so components, UI kits
   and slides render identically to the real product.
   Sharp corners · Indigo Ink · Systematic clarity.
   ============================================================ */

body {
  font-family: var(--tt-font-body);
  background: var(--tt-light-bg);
  color: var(--tt-light-body);
  -webkit-font-smoothing: antialiased;
}

/* ----- Typography helpers ----- */
.tt-heading { font-family: var(--tt-font-heading); letter-spacing: var(--tt-tracking-tight); }
.tt-eyebrow {
  font-family: var(--tt-font-heading);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-semibold);
  letter-spacing: var(--tt-tracking-wider);
  text-transform: uppercase;
  color: var(--tt-label-indigo);
}
/* Eyebrow on light: electric indigo text, no fill */
.tt-eyebrow-light {
  display: inline-block;
  font-family: var(--tt-font-heading);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-semibold);
  letter-spacing: var(--tt-tracking-wider);
  text-transform: uppercase;
  color: var(--tt-electric-indigo);
  background: transparent;
}
.tt-theme-dark .tt-eyebrow-light { color: var(--tt-accent-on-dark); }

/* ----- Accent line (3px, sharp ends) ----- */
.tt-accent-line {
  height: var(--tt-accent-line-height);
  width: 100%;
  background: var(--tt-electric-indigo);
  border: none;
  border-radius: 0;
  margin: 0;
}
.tt-accent-line-short { width: 48px; }

/* ============================================================
   BUTTONS — sharp corners, no rounding
   ============================================================ */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--tt-font-body);
  font-weight: var(--tt-weight-semibold);
  font-size: var(--tt-text-base);
  line-height: 1;
  padding: 0.75rem 1.25rem;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--tt-transition), border-color var(--tt-transition), color var(--tt-transition);
  user-select: none;
  text-decoration: none;
}
.tt-btn:focus-visible { outline: 2px solid var(--tt-accent-on-dark); outline-offset: 2px; }
.tt-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Primary — electric indigo fill */
.tt-btn-primary { background: var(--tt-accent); color: #FFFFFF; }
.tt-btn-primary:hover:not(:disabled) { background: var(--tt-accent-hover); }
.tt-btn-primary:active:not(:disabled) { background: var(--tt-accent-active); }

/* Secondary — outlined on dark */
.tt-btn-secondary { background: transparent; color: var(--tt-text); border-color: var(--tt-border-strong); }
.tt-btn-secondary:hover:not(:disabled) { background: var(--tt-surface-raised); border-color: var(--tt-accent-on-dark); }

/* Ghost — minimal on dark */
.tt-btn-ghost { background: transparent; color: var(--tt-text-muted); }
.tt-btn-ghost:hover:not(:disabled) { background: var(--tt-surface-raised); color: var(--tt-text); }

/* CTA — electric indigo, uppercase */
.tt-btn-cta { background: var(--tt-electric-indigo); color: #FFFFFF; letter-spacing: 0.04em; text-transform: uppercase; }
.tt-btn-cta:hover:not(:disabled) { background: var(--tt-accent-hover); }
.tt-btn-cta:active:not(:disabled) { background: var(--tt-accent-active); }

/* Secondary / ghost tuned for light surfaces */
.tt-btn-secondary-light { background: var(--tt-light-surface); color: var(--tt-light-heading); border-color: var(--tt-light-border); }
.tt-btn-secondary-light:hover:not(:disabled) { background: var(--tt-pale-lilac); border-color: var(--tt-electric-indigo); }
.tt-btn-ghost-light { background: transparent; color: var(--tt-electric-indigo); }
.tt-btn-ghost-light:hover:not(:disabled) { background: var(--tt-pale-lilac); }

/* Sizes */
.tt-btn-sm { padding: 0.5rem 0.875rem; font-size: var(--tt-text-sm); }
.tt-btn-lg { padding: 0.9375rem 1.75rem; font-size: var(--tt-text-base); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.tt-nav { background: var(--tt-surface); border-bottom: 1px solid var(--tt-border); }
.tt-nav-light { background: var(--tt-light-bg); border-bottom: 1px solid var(--tt-light-border); }
.tt-nav-link, .tt-nav-link-light {
  font-family: var(--tt-font-body);
  font-weight: var(--tt-weight-medium);
  font-size: var(--tt-text-base);
  padding: 0.5rem 0.875rem;
  border-bottom: 2px solid transparent;
  transition: color var(--tt-transition), border-color var(--tt-transition);
  cursor: pointer;
  text-decoration: none;
}
.tt-nav-link { color: var(--tt-text-muted); }
.tt-nav-link:hover { color: var(--tt-text); }
.tt-nav-link-active { color: #FFFFFF; border-bottom-color: var(--tt-electric-indigo); }
.tt-nav-link-light { color: var(--tt-light-body); }
.tt-nav-link-light:hover { color: var(--tt-light-heading); }
.tt-nav-link-light-active { color: var(--tt-light-heading); border-bottom-color: var(--tt-electric-indigo); }

/* ============================================================
   FORM CONTROLS (light surface; flip with .tt-theme-dark)
   ============================================================ */
.tt-label {
  display: block;
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-semibold);
  letter-spacing: var(--tt-tracking-wide);
  text-transform: uppercase;
  color: var(--tt-light-muted);
  margin-bottom: 0.375rem;
}
.tt-input, .tt-textarea, .tt-select {
  width: 100%;
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-base);
  color: var(--tt-light-heading);
  background: var(--tt-light-surface);
  border: 1px solid var(--tt-light-border);
  border-radius: 0;
  padding: 0.625rem 0.75rem;
  transition: border-color var(--tt-transition), box-shadow var(--tt-transition);
}
.tt-input::placeholder, .tt-textarea::placeholder { color: var(--tt-light-muted); }
.tt-input:focus, .tt-textarea:focus, .tt-select:focus {
  outline: none;
  border-color: var(--tt-electric-indigo);
  box-shadow: var(--tt-focus-shadow);
}

/* ============================================================
   STATUS CHIPS (Indigo Ink only)
   ============================================================ */
.tt-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-semibold);
  letter-spacing: var(--tt-tracking-wide);
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  border: 1px solid transparent;
}
.tt-chip-neutral { background: var(--tt-light-surface); color: var(--tt-warm-gray); border-color: var(--tt-pale-lilac); }
.tt-chip-verified { background: var(--tt-pale-lilac); color: var(--tt-electric-indigo); border-color: transparent; }
.tt-chip-service { background: var(--tt-light-surface); color: var(--tt-deep-indigo); border-color: var(--tt-pale-lilac); }
.tt-chip-accent { background: var(--tt-electric-indigo); color: #FFFFFF; border-color: transparent; }

/* ============================================================
   SECTIONS
   ============================================================ */
.tt-section-light { background: var(--tt-light-bg); color: var(--tt-light-body); transition: background-color 0.2s ease, color 0.2s ease; }
.tt-section-light .tt-heading { color: var(--tt-light-heading); }
.tt-section-dark { background: var(--tt-deep-indigo); color: var(--tt-text); }

/* ============================================================
   FIGURE / NUMBER BLOCK — "the number is the hero"
   ============================================================ */
.tt-figure {
  font-family: var(--tt-font-heading);
  font-weight: var(--tt-weight-bold);
  line-height: 1;
  letter-spacing: var(--tt-tracking-tight);
}
.tt-figure-total { color: var(--tt-accent-on-dark); }        /* total on dark */
.tt-figure-total-light { color: var(--tt-electric-indigo); } /* total on light */
.tt-figure-label {
  font-family: var(--tt-font-heading);
  font-size: var(--tt-text-xs);
  font-weight: var(--tt-weight-semibold);
  letter-spacing: var(--tt-tracking-wider);
  text-transform: uppercase;
  color: var(--tt-label-indigo);
}