@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600&family=Manrope:wght@300;500;700&family=Archivo+Black&family=Space+Mono:wght@400;700&family=Fraunces:opsz,wght@9..144,400;600;700&family=Source+Sans+3:wght@300;400;600&family=Sora:wght@300;500;700&family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@500;700&family=Work+Sans:wght@300;400;600&display=swap");

:root {
  color-scheme: light;
  --gc-bg: #ffffff;
  --gc-surface: #f8f9fb;
  --gc-text-main: #1d1f22;
  --gc-text-secondary: #5f6770;
  --gc-primary: #2a3b47;
  --gc-border: rgba(28, 31, 36, 0.12);
  --gc-display: "Space Grotesk";
  --gc-body: "IBM Plex Sans";
  --gc-card-radius: 14px;
  --gc-card-shadow: 0 18px 40px rgba(21, 25, 30, 0.12);
  --gc-card-border: 1px solid rgba(28, 31, 36, 0.08);
  --gc-pattern: none;
  --gc-blob-opacity: 0.6;
  --gc-blob-1: radial-gradient(circle at 30% 30%, rgba(42, 59, 71, 0.12), transparent 70%);
  --gc-blob-2: radial-gradient(circle at 70% 30%, rgba(42, 59, 71, 0.08), transparent 70%);
  --gc-blob-1-size: 520px;
  --gc-blob-2-size: 560px;
  --gc-blob-1-top: -140px;
  --gc-blob-1-left: -160px;
  --gc-blob-2-bottom: -220px;
  --gc-blob-2-right: -140px;
}

* {
  box-sizing: border-box;
}

html,
body {
  background: var(--gc-bg);
  color: var(--gc-text-main);
}

body {
  position: relative;
  font-family: var(--gc-body), sans-serif;
  background-image: var(--gc-pattern);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  width: var(--gc-blob-1-size);
  height: var(--gc-blob-1-size);
  background: var(--gc-blob-1);
  top: var(--gc-blob-1-top);
  left: var(--gc-blob-1-left);
  opacity: var(--gc-blob-opacity);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

body::after {
  width: var(--gc-blob-2-size);
  height: var(--gc-blob-2-size);
  background: var(--gc-blob-2);
  bottom: var(--gc-blob-2-bottom);
  right: var(--gc-blob-2-right);
  top: auto;
  left: auto;
}

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

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

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

.text-text-main {
  color: var(--gc-text-main) !important;
}

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

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

.border-border-subtle {
  border-color: var(--gc-border) !important;
}

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

.font-display {
  font-family: var(--gc-display), sans-serif !important;
}

.font-body {
  font-family: var(--gc-body), sans-serif !important;
}

section article > a {
  border-radius: var(--gc-card-radius) !important;
  border: var(--gc-card-border);
  box-shadow: var(--gc-card-shadow);
}

section article > a:hover {
  transform: translateY(-2px);
}

section article img {
  filter: var(--gc-image-filter, none);
}

section article h3 {
  letter-spacing: var(--gc-title-spacing, -0.01em);
}

section article .text-primary {
  transition: color 0.2s ease;
}

footer {
  background: var(--gc-footer-bg, transparent);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body > div > header,
body > div > section,
body > div > footer {
  animation: rise-in 0.8s ease both;
}

body > div > section:nth-of-type(1) {
  animation-delay: 0.08s;
}

body > div > section:nth-of-type(2) {
  animation-delay: 0.16s;
}

body > div > footer {
  animation-delay: 0.24s;
}

.theme-aurora {
  --gc-bg: #f5f7ff;
  --gc-surface: #ffffff;
  --gc-text-main: #161b33;
  --gc-text-secondary: #4e5a7a;
  --gc-primary: #3a3ef2;
  --gc-border: rgba(58, 62, 242, 0.14);
  --gc-display: "Unbounded";
  --gc-body: "Manrope";
  --gc-card-shadow: 0 18px 48px rgba(58, 62, 242, 0.18);
  --gc-blob-1: radial-gradient(circle at 30% 30%, rgba(99, 110, 255, 0.25), transparent 70%);
  --gc-blob-2: radial-gradient(circle at 70% 30%, rgba(92, 208, 255, 0.22), transparent 70%);
  --gc-pattern: linear-gradient(135deg, rgba(58, 62, 242, 0.05), transparent 60%);
  --gc-footer-bg: rgba(255, 255, 255, 0.6);
}

.theme-brutalist {
  --gc-bg: #fef7e6;
  --gc-surface: #fff2b7;
  --gc-text-main: #1a1612;
  --gc-text-secondary: #3d3229;
  --gc-primary: #f04e2a;
  --gc-border: #1a1612;
  --gc-display: "Archivo Black";
  --gc-body: "Space Mono";
  --gc-card-radius: 2px;
  --gc-card-shadow: none;
  --gc-card-border: 3px solid #1a1612;
  --gc-blob-opacity: 0.35;
  --gc-blob-1: linear-gradient(135deg, rgba(240, 78, 42, 0.3), transparent 60%);
  --gc-blob-2: linear-gradient(225deg, rgba(248, 187, 36, 0.35), transparent 70%);
  --gc-pattern: repeating-linear-gradient(0deg, rgba(26, 22, 18, 0.05) 0, rgba(26, 22, 18, 0.05) 2px, transparent 2px, transparent 8px);
  --gc-title-spacing: 0.04em;
}

.theme-ink {
  --gc-bg: #f6f2ec;
  --gc-surface: #ffffff;
  --gc-text-main: #0e1a2b;
  --gc-text-secondary: #4f5965;
  --gc-primary: #16396b;
  --gc-border: rgba(14, 26, 43, 0.16);
  --gc-display: "Playfair Display";
  --gc-body: "Work Sans";
  --gc-card-shadow: 0 16px 40px rgba(14, 26, 43, 0.18);
  --gc-blob-1: radial-gradient(circle at 25% 20%, rgba(22, 57, 107, 0.18), transparent 70%);
  --gc-blob-2: radial-gradient(circle at 70% 30%, rgba(120, 162, 200, 0.18), transparent 75%);
  --gc-pattern: linear-gradient(90deg, rgba(14, 26, 43, 0.03) 0, rgba(14, 26, 43, 0.03) 1px, transparent 1px, transparent 28px);
  --gc-image-filter: saturate(1.05) contrast(1.02);
}

.theme-sand {
  --gc-bg: #f7efe3;
  --gc-surface: #fff9f1;
  --gc-text-main: #4b2e24;
  --gc-text-secondary: #7c5c50;
  --gc-primary: #c3562b;
  --gc-border: rgba(75, 46, 36, 0.14);
  --gc-display: "Fraunces";
  --gc-body: "Source Sans 3";
  --gc-card-shadow: 0 18px 42px rgba(123, 78, 55, 0.18);
  --gc-blob-1: radial-gradient(circle at 30% 20%, rgba(229, 170, 120, 0.35), transparent 70%);
  --gc-blob-2: radial-gradient(circle at 70% 30%, rgba(201, 109, 70, 0.22), transparent 75%);
  --gc-pattern: linear-gradient(120deg, rgba(201, 109, 70, 0.08), transparent 55%);
}

.theme-vivid {
  --gc-bg: #f7fbff;
  --gc-surface: #ffffff;
  --gc-text-main: #0f172a;
  --gc-text-secondary: #3a4a66;
  --gc-primary: #ff3d81;
  --gc-border: rgba(15, 23, 42, 0.12);
  --gc-display: "Sora";
  --gc-body: "DM Sans";
  --gc-card-shadow: 0 20px 48px rgba(255, 61, 129, 0.16);
  --gc-blob-1: radial-gradient(circle at 25% 20%, rgba(255, 61, 129, 0.28), transparent 70%);
  --gc-blob-2: radial-gradient(circle at 70% 30%, rgba(0, 184, 255, 0.2), transparent 75%);
  --gc-pattern: linear-gradient(135deg, rgba(255, 61, 129, 0.04), transparent 60%);
  --gc-image-filter: saturate(1.1);
}

.theme-noir {
  --gc-bg: #f2efe9;
  --gc-surface: #ffffff;
  --gc-text-main: #0b0b0c;
  --gc-text-secondary: #3d3d3f;
  --gc-primary: #101b2c;
  --gc-border: rgba(11, 11, 12, 0.2);
  --gc-display: "Playfair Display";
  --gc-body: "Work Sans";
  --gc-card-radius: 20px;
  --gc-card-shadow: 0 22px 50px rgba(11, 11, 12, 0.2);
  --gc-blob-1: radial-gradient(circle at 30% 30%, rgba(16, 27, 44, 0.2), transparent 70%);
  --gc-blob-2: radial-gradient(circle at 70% 30%, rgba(45, 45, 55, 0.16), transparent 75%);
  --gc-pattern: radial-gradient(circle at 15% 15%, rgba(16, 27, 44, 0.08), transparent 35%);
}