/* public/assets/ui/framework/02_base.css
   KomodUI Base v0.1
   Typography + document baseline
*/

/* =========================
   Document
   ========================= */

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--line-height-normal);
  color: var(--color-text-main);
  background: var(--color-bg-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================
   Typography
   ========================= */

h1, h2, h3, h4 {
  font-weight: var(--font-weight-black);
  color: var(--color-text-heading);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }

p {
  line-height: var(--line-height-relaxed);
}

strong { font-weight: var(--font-weight-bold); }
em { font-style: italic; }

/* =========================
   Links
   ========================= */

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

a:hover {
  color: var(--color-primary);
}

/* =========================
   Text helpers
   ========================= */

.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }

.break-words {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================
   Small content spacing defaults
   ========================= */

.flow > * + * {
  margin-top: var(--space-4);
}

.flow-sm > * + * {
  margin-top: var(--space-2);
}

.flow-lg > * + * {
  margin-top: var(--space-6);
}