/* ─────────────────────────────────────────────────
   Color Stylesheet — Vlad Hulin Portfolio
───────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────
   Color Design Tokens & Theme Variables
───────────────────────────────────────────────── */
:root {
  /* Background Colors */
  --bg-main: #fbfbfb;
  --bg-subtle: #f4f4f6;
  --bg-card: #ffffff;
  --bg-pill: #ffffff;

  /* Border Colors */
  --border-subtle: #e4e4e7;
  --border-card: #e4e4e7;
  --border-active: #111113;

  /* Typography Text Colors */
  --text-display: #111113;
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-muted: #71717a;
  --text-subtle: #a1a1aa;

  /* Accent & Interactive Colors */
  --color-accent: #111113;
  --color-accent-hover: #27272a;
}

/* ─────────────────────────────────────────────────
   Color Helper & Utility Classes
───────────────────────────────────────────────── */

/* Background Color Utilities */
.bg-main {
  background-color: var(--bg-main) !important;
}

.bg-subtle {
  background-color: var(--bg-subtle) !important;
}

.bg-card {
  background-color: var(--bg-card) !important;
}

.bg-pill {
  background-color: var(--bg-pill) !important;
}

/* Text Color Utilities */
.text-display,
.text-display-color {
  color: var(--text-display) !important;
}

.text-primary,
.text-primary-color {
  color: var(--text-primary) !important;
}

.text-secondary,
.text-secondary-color {
  color: var(--text-secondary) !important;
}

.text-muted,
.text-muted-color {
  color: var(--text-muted) !important;
}

.text-subtle,
.text-subtle-color {
  color: var(--text-subtle) !important;
}

/* Border Color Utilities */
.border-subtle,
.border-subtle-color {
  border-color: var(--border-subtle) !important;
}

.border-card,
.border-card-color {
  border-color: var(--border-card) !important;
}