:root[data-design="calm-tech"] {
  color-scheme: light;
  --bg: #f4f9ff;
  --surface: #ffffff;
  --surface-raised: #edf6ff;
  --text: #14263a;
  --text-muted: #5b7087;
  --border: #cddfed;
  --accent: #2376c9;
  --accent-strong: #103b73;
  --accent-warm: #1b9ab8;
  --danger: #b42318;
  --focus-ring: #2376c9;

  --radius: 0.75rem;
  --radius-pill: 9999px;
  --radius-card: 0.75rem;

  --shadow: 0 10px 32px rgb(0 0 0 / 0.06);
  --shadow-header: 0 1px 0 rgb(0 0 0 / 0.08);

  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-step-025: 0.75rem;
  --font-size-step-050: 0.875rem;
  --font-size-step-075: 1rem;
  --font-size-step-100: 1.125rem;
  --font-size-step-200: 1.35rem;
  --font-size-step-300: 1.6rem;
  --font-size-step-400: 1.9rem;
  --font-size-step-500: 2.25rem;
  --heading-weight: 700;
  --border-width: 1px;
}

:root[data-design="calm-tech"] .site-header {
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08);
}
:root[data-design="calm-tech"] .surface,
:root[data-design="calm-tech"] .route-card,
:root[data-design="calm-tech"] .article-card {
  border-radius: var(--radius-card);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.04);
}
:root[data-design="calm-tech"] .home-hero {
  min-height: min(40rem, calc(100vh - 5rem));
}

:root[data-design="dark-network"] {
  color-scheme: dark;
  --bg: #131820;
  --surface: #1a1f2b;
  --surface-raised: #222838;
  --text: #e8ecf2;
  --text-muted: #8b96a8;
  --border: #2a3344;
  --accent: #f0a452;
  --accent-strong: #ffc27a;
  --accent-warm: #f0a452;
  --danger: #ff8a80;
  --focus-ring: #f0a452;

  --radius: 0.75rem;
  --radius-pill: 9999px;
  --radius-card: 0.75rem;

  --shadow: 0 4px 20px rgb(0 0 0 / 0.14);
  --shadow-header: 0 12px 36px rgb(0 0 0 / 0.14);

  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-step-025: 0.75rem;
  --font-size-step-050: 0.875rem;
  --font-size-step-075: 1rem;
  --font-size-step-100: 1.125rem;
  --font-size-step-200: 1.35rem;
  --font-size-step-300: 1.6rem;
  --font-size-step-400: 1.9rem;
  --font-size-step-500: 2.25rem;
  --heading-weight: 700;
  --border-width: 1px;
}

:root[data-design="dark-network"] .site-header {
  background: color-mix(in srgb, #1a1f2b 80%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 12px 36px rgb(0 0 0 / 0.14);
}
:root[data-design="dark-network"] .surface,
:root[data-design="dark-network"] .route-card,
:root[data-design="dark-network"] .article-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
:root[data-design="dark-network"] .article-body {
  border: 1px solid #2a3344;
  background: color-mix(in srgb, #1a1f2b 90%, transparent);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.04);
}
:root[data-design="dark-network"] .home-hero {
  min-height: min(40rem, calc(100vh - 5rem));
}

:root[data-design="data-center-glass"] {
  color-scheme: dark;
  --bg: #0b203b;
  --surface: #1c4772;
  --surface-raised: #2a5d91;
  --text: #f4f9ff;
  --text-muted: #c8dbef;
  --border: #89add0;
  --accent: #8be7ff;
  --accent-strong: #8b7dff;
  --accent-warm: #f7c76d;
  --danger: #ff9f9f;
  --focus-ring: #8be7ff;

  --radius: 0.75rem;
  --radius-pill: 9999px;
  --radius-card: 0.75rem;

  --shadow: 0 18px 52px rgb(0 0 0 / 0.22);
  --shadow-header: 0 12px 36px rgb(0 0 0 / 0.14);

  --font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  --font-size-step-025: 0.8rem;
  --font-size-step-050: 0.95rem;
  --font-size-step-075: 1.1rem;
  --font-size-step-100: 1.25rem;
  --font-size-step-200: 1.5rem;
  --font-size-step-300: 1.8rem;
  --font-size-step-400: 2.15rem;
  --font-size-step-500: 2.6rem;
  --heading-weight: 600;
  --border-width: 1px;

  --glass-bg: linear-gradient(180deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.055)), color-mix(in srgb, var(--surface) 54%, transparent);
  --glass-border: rgb(211 236 255 / 0.3);
  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 18px 52px rgb(0 0 0 / 0.2);
  --glass-backdrop-filter: blur(18px) saturate(1.2);
}

:root[data-design="data-center-glass"] .site-header {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.055)), color-mix(in srgb, var(--surface) 54%, transparent);
  border-color: rgb(211 236 255 / 0.3);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 18px 52px rgb(0 0 0 / 0.2);
}
:root[data-design="data-center-glass"] .surface,
:root[data-design="data-center-glass"] .route-card,
:root[data-design="data-center-glass"] .article-card {
  border-radius: var(--radius-card);
  box-shadow: none;
}
:root[data-design="data-center-glass"] .surface,
:root[data-design="data-center-glass"] .route-card,
:root[data-design="data-center-glass"] .article-card {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.055)), color-mix(in srgb, var(--surface) 54%, transparent);
  border-color: rgb(211 236 255 / 0.3);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 18px 52px rgb(0 0 0 / 0.2);
}
:root[data-design="data-center-glass"] .article-body {
  border: rgb(211 236 255 / 0.3);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.055)), color-mix(in srgb, var(--surface) 54%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
}
:root[data-design="data-center-glass"] .article-body {
  line-height: 1.85;
  max-width: 52rem;
}
:root[data-design="data-center-glass"] .surface,
:root[data-design="data-center-glass"] .route-card {
  padding: 1.5rem;
}
:root[data-design="data-center-glass"] .home-hero {
  min-height: min(43rem, calc(100vh - 5rem));
  background: url("/media/designs/data-center-glass-hero.png") center top / cover no-repeat;
}

:root[data-design="minimal-academy"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f8f8f8;
  --text: #111111;
  --text-muted: #555555;
  --border: #e0e0e0;
  --accent: #111111;
  --accent-strong: #000000;
  --accent-warm: #555555;
  --danger: #c62828;
  --focus-ring: #111111;

  --radius: 0rem;
  --radius-pill: 0rem;
  --radius-card: 0rem;

  --shadow: none;
  --shadow-header: 0 1px 0 rgb(0 0 0 / 0.08);

  --font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  --font-size-step-025: 0.7rem;
  --font-size-step-050: 0.8rem;
  --font-size-step-075: 0.9rem;
  --font-size-step-100: 1rem;
  --font-size-step-200: 1.2rem;
  --font-size-step-300: 1.44rem;
  --font-size-step-400: 1.73rem;
  --font-size-step-500: 2.07rem;
  --heading-weight: 800;
  --border-width: 0px;
}

:root[data-design="minimal-academy"] .site-header {
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08);
}
:root[data-design="minimal-academy"] .surface,
:root[data-design="minimal-academy"] .route-card,
:root[data-design="minimal-academy"] .article-card {
  border-radius: 0;
  box-shadow: none;
}
:root[data-design="minimal-academy"] .article-body {
  line-height: 1.6;
}
:root[data-design="minimal-academy"] .surface,
:root[data-design="minimal-academy"] .route-card {
  padding: 0.75rem;
}
:root[data-design="minimal-academy"] .home-hero {
  min-height: min(36rem, calc(100vh - 5rem));
}

:root[data-design="soft-engineering"] {
  color-scheme: light;
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-raised: #f5f0e8;
  --text: #3e3324;
  --text-muted: #7d6b4b;
  --border: #d4c9b8;
  --accent: #8b6914;
  --accent-strong: #5c3d0e;
  --accent-warm: #b8860b;
  --danger: #b42318;
  --focus-ring: #8b6914;

  --radius: 0.75rem;
  --radius-pill: 9999px;
  --radius-card: 0.75rem;

  --shadow: 0 10px 32px rgb(0 0 0 / 0.06);
  --shadow-header: 0 1px 0 rgb(0 0 0 / 0.08);

  --font-family: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-size-step-025: 0.75rem;
  --font-size-step-050: 0.875rem;
  --font-size-step-075: 1rem;
  --font-size-step-100: 1.125rem;
  --font-size-step-200: 1.35rem;
  --font-size-step-300: 1.6rem;
  --font-size-step-400: 1.9rem;
  --font-size-step-500: 2.25rem;
  --heading-weight: 600;
  --border-width: 1px;
}

:root[data-design="soft-engineering"] .site-header {
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08);
}
:root[data-design="soft-engineering"] .surface,
:root[data-design="soft-engineering"] .route-card,
:root[data-design="soft-engineering"] .article-card {
  border-radius: var(--radius-card);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.04);
}
:root[data-design="soft-engineering"] .home-hero {
  min-height: min(40rem, calc(100vh - 5rem));
}