/* ============================================================
   Tiny Prism — Components
   Requires colors_and_type.css.
   All components are class-based (.tp-*) so they can be dropped
   into any HTML without a framework.
   ============================================================ */

/* ============================================================
   BUTTON
   .tp-btn is the base. Combine with a variant + optional size.
   Variants: --primary, --secondary, --ghost, --inverse, --link
   Sizes:    --sm (default), --md, --lg
   ============================================================ */
.tp-btn {
  --_bg: var(--tp-fg);
  --_fg: var(--tp-fg-inverse);
  --_bd: var(--tp-fg);
  --_bg-h: var(--tp-ink-80);
  --_bd-h: var(--tp-ink-80);

  display: inline-flex;
  align-items: center;
  gap: var(--tp-s-2);
  padding: 0.75rem 1.25rem;
  font-family: var(--tp-font-display);
  font-size: var(--tp-fs-body);
  font-weight: var(--tp-fw-600);
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--_fg);
  background: var(--_bg);
  border: var(--tp-bw-1) solid var(--_bd);
  border-radius: var(--tp-r-0);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--tp-dur) var(--tp-ease),
    border-color var(--tp-dur) var(--tp-ease),
    color var(--tp-dur) var(--tp-ease),
    transform var(--tp-dur-fast) var(--tp-ease),
    box-shadow var(--tp-dur) var(--tp-ease);
  -webkit-appearance: none;
  appearance: none;
}
.tp-btn:hover { background: var(--_bg-h); border-color: var(--_bd-h); color: var(--_fg); text-decoration: none; }
.tp-btn:active { transform: translateY(1px); }
.tp-btn:focus-visible { outline: 2px solid var(--tp-ring); outline-offset: 2px; }
.tp-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.tp-btn--primary {
  --_bg: var(--tp-accent);
  --_fg: var(--tp-accent-fg);
  --_bd: var(--tp-accent);
  --_bg-h: var(--tp-accent-hover);
  --_bd-h: var(--tp-accent-hover);
}
.tp-btn--primary:hover { box-shadow: var(--tp-shadow-accent); }

.tp-btn--secondary {
  --_bg: transparent;
  --_fg: var(--tp-fg);
  --_bd: var(--tp-fg);
  --_bg-h: var(--tp-fg);
  --_bd-h: var(--tp-fg);
}
.tp-btn--secondary:hover { color: var(--tp-bg); }

.tp-btn--ghost {
  --_bg: transparent;
  --_fg: var(--tp-fg);
  --_bd: var(--tp-border-strong);
  --_bg-h: var(--tp-bg-muted);
  --_bd-h: var(--tp-border-strong);
}

.tp-btn--inverse {
  --_bg: var(--tp-bg);
  --_fg: var(--tp-fg);
  --_bd: var(--tp-bg);
  --_bg-h: var(--tp-ink-10);
  --_bd-h: var(--tp-ink-10);
}

.tp-btn--link {
  --_bg: transparent;
  --_fg: var(--tp-fg);
  --_bd: transparent;
  padding: 0;
  gap: var(--tp-s-2);
}
.tp-btn--link:hover { background: transparent; color: var(--tp-accent); }
.tp-btn--link .tp-btn__arrow { transition: transform var(--tp-dur) var(--tp-ease); }
.tp-btn--link:hover .tp-btn__arrow { transform: translateX(3px); }

.tp-btn--sm { padding: 0.5rem 0.875rem; font-size: var(--tp-fs-sm); }
.tp-btn--lg { padding: 1rem 1.75rem; font-size: var(--tp-fs-lg); }

/* ============================================================
   INPUTS / FORMS
   ============================================================ */
.tp-field { display: flex; flex-direction: column; gap: 0.4rem; }
.tp-field__label {
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-xs);
  letter-spacing: var(--tp-tr-wide);
  text-transform: uppercase;
  color: var(--tp-fg-muted);
}
.tp-input,
.tp-textarea,
.tp-select {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-family: var(--tp-font-body);
  font-size: var(--tp-fs-body);
  color: var(--tp-fg);
  background: var(--tp-bg);
  border: var(--tp-bw-1) solid var(--tp-border-strong);
  border-radius: var(--tp-r-0);
  transition: border-color var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
  -webkit-appearance: none;
  appearance: none;
}
.tp-input::placeholder, .tp-textarea::placeholder { color: var(--tp-fg-subtle); }
.tp-input:hover, .tp-textarea:hover, .tp-select:hover { border-color: var(--tp-fg); }
.tp-input:focus, .tp-textarea:focus, .tp-select:focus {
  outline: 0;
  border-color: var(--tp-accent);
  box-shadow: 0 0 0 3px var(--tp-ring);
}
.tp-textarea { min-height: 8rem; font-family: var(--tp-font-body); resize: vertical; }

/* ============================================================
   CARD
   ============================================================ */
.tp-card {
  background: var(--tp-bg);
  border: var(--tp-bw-1) solid var(--tp-border);
  border-radius: var(--tp-r-0);
  padding: var(--tp-s-6);
  transition: border-color var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease), transform var(--tp-dur) var(--tp-ease);
}
.tp-card--hover:hover { border-color: var(--tp-fg); box-shadow: var(--tp-shadow-2); transform: translateY(-2px); }
.tp-card--inverse { background: var(--tp-bg-inverse); color: var(--tp-fg-inverse); border-color: var(--tp-bg-inverse); }
.tp-card--inverse p { color: var(--tp-ink-30); }
.tp-card--inverse h1, .tp-card--inverse h2, .tp-card--inverse h3, .tp-card--inverse h4 { color: var(--tp-fg-inverse); }

/* Service card — rays-and-triangle motif as hover signature */
.tp-service {
  position: relative;
  padding: var(--tp-s-6);
  border: 1px solid var(--tp-border);
  background: var(--tp-bg);
  transition: all var(--tp-dur) var(--tp-ease);
  overflow: hidden;
}
.tp-service::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--tp-accent-soft) 100%);
  opacity: 0;
  transition: opacity var(--tp-dur) var(--tp-ease);
  pointer-events: none;
}
.tp-service:hover { border-color: var(--tp-fg); }
.tp-service:hover::before { opacity: 1; }
.tp-service > * { position: relative; }
.tp-service__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--tp-fg);
  color: var(--tp-bg);
  margin-bottom: var(--tp-s-4);
}
.tp-service__icon svg { width: 24px; height: 24px; }
.tp-service__title { font-family: var(--tp-font-display); font-size: var(--tp-fs-h5); font-weight: var(--tp-fw-600); margin: 0 0 var(--tp-s-2); }
.tp-service__desc { color: var(--tp-fg-muted); font-size: var(--tp-fs-body); margin: 0; }

/* ============================================================
   BADGES / CHIPS / META
   ============================================================ */
.tp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-xs);
  letter-spacing: var(--tp-tr-wide);
  text-transform: uppercase;
  color: var(--tp-fg);
  background: var(--tp-bg-muted);
  border-radius: var(--tp-r-pill);
}
.tp-badge--accent { background: var(--tp-accent-soft); color: var(--tp-blue-700); }
.tp-badge--inverse { background: var(--tp-fg); color: var(--tp-fg-inverse); }
.tp-badge--outline { background: transparent; border: 1px solid var(--tp-border-strong); color: var(--tp-fg-muted); }

.tp-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   NAV — top bar used by the marketing site
   ============================================================ */
.tp-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--tp-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tp-border);
}
.tp-nav__inner {
  max-width: var(--tp-container);
  margin: 0 auto;
  padding: var(--tp-s-3) var(--tp-s-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tp-s-5);
}
.tp-nav__brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--tp-fg); }
.tp-nav__brand-glyph { width: 28px; height: 28px; }
.tp-nav__brand-name {
  font-family: var(--tp-font-display);
  font-weight: var(--tp-fw-700);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}
.tp-nav__brand-suffix {
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-xs);
  color: var(--tp-accent);
  margin-left: 0.25rem;
  letter-spacing: 0;
}
.tp-nav__links { display: flex; gap: var(--tp-s-5); align-items: center; list-style: none; margin: 0; padding: 0; }
.tp-nav__links a {
  color: var(--tp-fg);
  font-size: var(--tp-fs-sm);
  font-weight: var(--tp-fw-500);
  text-decoration: none;
}
.tp-nav__links a:hover { color: var(--tp-accent); }
.tp-nav__cta { display: flex; gap: var(--tp-s-3); align-items: center; }

/* ============================================================
   STAT + NUMBER STRIP
   ============================================================ */
.tp-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.tp-stat__num {
  font-family: var(--tp-font-display);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  font-weight: var(--tp-fw-700);
  letter-spacing: var(--tp-tr-tight);
  line-height: 1;
  color: var(--tp-fg);
}
.tp-stat__num sup { font-size: 0.5em; font-weight: var(--tp-fw-500); color: var(--tp-accent); vertical-align: super; }
.tp-stat__label {
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tp-tr-wide);
  color: var(--tp-fg-muted);
}

/* ============================================================
   CALLOUT / BANNER
   ============================================================ */
.tp-callout {
  display: flex;
  gap: var(--tp-s-4);
  padding: var(--tp-s-5);
  background: var(--tp-bg-inverse);
  color: var(--tp-fg-inverse);
  border-left: 4px solid var(--tp-accent);
}
.tp-callout__body p { color: var(--tp-ink-20); margin: 0; }

/* ============================================================
   DIVIDER — labeled horizontal rule with mono label centered
   ============================================================ */
.tp-divider {
  display: flex; align-items: center; gap: var(--tp-s-4);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-xs);
  letter-spacing: var(--tp-tr-wide);
  text-transform: uppercase;
  color: var(--tp-fg-subtle);
}
.tp-divider::before, .tp-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--tp-border);
}

/* ============================================================
   SURFACE — grid-lines motif (original .lines-wrap)
   Adds 4 vertical guide rules to a section, evoking an engineer's canvas.
   ============================================================ */
.tp-grid-lines {
  position: relative;
}
.tp-grid-lines::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--tp-grid-line) 1px, transparent 1px);
  background-size: calc(100% / 4) 100%;
  background-position: 0 0;
  pointer-events: none;
  opacity: 0.6;
}

/* ============================================================
   FOCUS RING for any custom-role control
   ============================================================ */
[data-focus-ring]:focus-visible { outline: 2px solid var(--tp-ring); outline-offset: 3px; }