/* ==========================================================================
   TRIPLEMETER BASE STYLES
   Global resets, typography scale, and page foundation.
   Import after tokens.css.
   ========================================================================== */

/* -------------------------
   RESET & BASE
------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-body);
  background: var(--color-bg);
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-teal);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* -------------------------
   TYPOGRAPHY SCALE
------------------------- */

/* Display / Hero — Barlow Condensed */
.text-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* H1 */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-body);
}

/* H2 */
h2, .h2 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-body);
}

/* H3 */
h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-body);
}

/* H4 */
h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-body);
}

/* Body */
p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  margin-bottom: var(--space-2);
}

p:last-child {
  margin-bottom: 0;
}

/* Small / Label */
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* Label / Caption — ALL CAPS */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Lead paragraph */
.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  font-weight: 400;
  color: var(--color-muted);
}

/* Mono */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* -------------------------
   UTILITY CLASSES
------------------------- */

/* Color utilities */
.text-orange   { color: var(--color-orange); }
.text-teal     { color: var(--color-teal); }
.text-muted    { color: var(--color-muted); }
.text-white    { color: #FFFFFF; }
.text-body     { color: var(--color-body); }

.bg-orange     { background: var(--color-orange); }
.bg-teal       { background: var(--color-teal); }
.bg-teal-dark  { background: var(--color-teal-dark); }
.bg-surface    { background: var(--color-surface); }
.bg-white      { background: var(--color-bg); }

/* Weight utilities */
.font-regular  { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 800; }

/* Alignment */
.text-left     { text-align: left; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }

/* Display */
.hidden        { display: none; }
.block         { display: block; }
.flex          { display: flex; }
.grid          { display: grid; }
.inline        { display: inline; }
.inline-block  { display: inline-block; }

/* Flex utilities */
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start   { justify-content: flex-start; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.gap-1           { gap: var(--space-1); }
.gap-2           { gap: var(--space-2); }
.gap-3           { gap: var(--space-3); }
.gap-4           { gap: var(--space-4); }

/* Spacing utilities */
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

/* Border radius */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: var(--radius-full); }

/* Borders */
.border        { border: 1px solid var(--color-border); }
.border-top    { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Width / sizing */
.w-full    { width: 100%; }
.h-full    { height: 100%; }
.max-w-doc { max-width: var(--doc-width); }