:root {
    /* Default Semantic Variables */
    --color-primary: black;
    --color-secondary: gray;
    --color-accent: blue;
    --color-text: black;
    --color-background: white;

    --font-heading: sans-serif;
    --font-body: serif;
    --font-ui: sans-serif;

    --size-h1: 48px;
    --size-h2: 36px;
    --size-text: 16px;
    --size-ui: 14px;

    --radius-btn: 4px;
    --border-width-btn: 2px;
    
    --text-transform-heading: none;
    --letter-spacing-heading: normal;
    
    --text-transform-ui: none;
    --letter-spacing-ui: normal;
}

/* Reset / Base */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-h1, 700);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-heading, var(--color-text));
  text-transform: var(--text-transform-heading);
  margin-top: 0;
}

h1 {
  font-size: var(--size-h1);
  line-height: var(--line-height-h1);
}

h2 {
  font-size: var(--size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--weight-h2, 700);
}

p, li {
  font-family: var(--font-body);
  font-size: var(--size-text);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

/* UI Components */
.btn,
.tag,
label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--size-ui);
  text-transform: var(--text-transform-ui);
  letter-spacing: var(--letter-spacing-ui);
}

.btn {
  background-color: var(--color-primary);
  color: var(--color-btn-text, white);
  padding: 10px 15px;
  border: var(--border-width-btn) solid var(--color-border-btn, var(--color-primary));
  border-radius: var(--radius-btn);
  cursor: pointer;
  margin-right: 10px;
  display: inline-block;
  text-decoration: none;
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  padding: 10px 15px;
  border: var(--border-width-btn) solid var(--color-border-btn-sec, var(--color-primary));
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--size-ui);
  font-family: var(--font-ui);
}

.tag {
  background-color: var(--color-tag-bg, var(--color-accent));
  color: var(--color-tag-text, white);
  border: var(--border-width-tag, 0) solid var(--color-border-tag, transparent);
  padding: 5px 10px;
  border-radius: var(--radius-btn);
  display: inline-block;
}

/* Form Elements */
input, select, textarea {
  padding: 10px;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: var(--size-ui);
  background-color: var(--color-background);
  color: var(--color-text);
}

/* Utility Classes for Background Colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-background { background-color: var(--color-background); }
.bg-text { background-color: var(--color-text); }
.bg-text-heading { background-color: var(--color-text-heading); }

/* Utility Classes for Borders */
.border-soft { border-bottom: 1px solid #eee; }