/*
 * File: css/conf/00-base/02.typography.css
 * Logic: Font Definitions & Base Typography.
 * Refactored from: 00.fonts.css, 02.typography.css, 03.gap.css, 01.colors.css
 */

/* ==========================================================================
   2. BASE TYPOGRAPHY
   ========================================================================== */
body {
  font-family: var(--p-font-family);
  font-size: var(--p-font-size);
  line-height: var(--p-line-height);
  color: var(--text-body);
  background-color: var(--surface-bg);
}

/* ==========================================================================
   3. HEADINGS
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--h-font-family);
  font-weight: var(--h-font-weight);
  line-height: var(--h-line-height);
  color: var(--text-title);
  margin-top: 0;
  margin-bottom: var(--h-gap);
}

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

/* ==========================================================================
   4. TEXT ELEMENTS
   ========================================================================== */
p {
  margin-top: 0;
  margin-bottom: var(--p-gap);
  color: var(--text-body);
}

a {
  color: var(--link-primary);
  text-decoration: none;
  transition: color var(--transition-base),
    background-color var(--transition-base), border-color var(--transition-base);
}

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

label {
  display: block;
  /* font-weight: 700; */
  font-weight: var(--h-font-weight);
  margin-bottom: var(--space-xs);
  color: var(--text-body);
}

blockquote {
  border-left: var(--separator-height) solid var(--color-secondary);
  background-color: var(--bg-gray-light);
  color: var(--text-body);
  margin: var(--space-md) 0;
  padding: var(--space-md);
}

/* ==========================================================================
   5. FORM TYPOGRAPHY
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  font-family: var(--p-font-family);
  font-size: var(--p-font-size);
}