:root {
  --paper: 253 251 247;
  --paper-dark: 245 242 235;
  --paper-border: 224 222 217;
  --ink: 26 26 26;
  --ink-light: 74 74 74;
  --ink-muted: 122 122 122;

  --sage-50: 244 247 245;
  --sage-100: 227 235 229;
  --sage-200: 200 213 203;
  --sage-300: 168 189 169;
  --sage-400: 122 154 126;
  --sage-500: 74 93 78;
  --sage-600: 63 80 67;
  --sage-700: 58 73 61;
  --sage-800: 45 58 48;

  --terracotta-50: 251 245 244;
  --terracotta-100: 245 230 228;
  --terracotta-200: 233 203 199;
  --terracotta-300: 214 169 162;
  --terracotta-400: 184 128 122;
  --terracotta-500: 140 94 88;
  --terracotta-600: 122 80 75;
  --terracotta-700: 102 67 65;

  --amber-50: 255 251 235;
  --amber-100: 254 243 199;
  --amber-200: 253 230 138;
  --amber-300: 252 211 77;
  --amber-400: 251 191 36;
  --amber-500: 245 158 11;
  --amber-600: 217 119 6;
  --amber-700: 180 83 9;

  --blue-50: 239 246 255;
  --blue-100: 219 234 254;
  --blue-200: 191 219 254;
  --blue-300: 147 197 253;
  --blue-400: 96 165 250;
  --blue-500: 59 130 246;
  --blue-600: 37 99 235;
  --blue-700: 29 78 216;
  --blue-800: 30 64 175;

  --surface-card: 255 255 255;
  --surface-card-alpha: 1;
  --surface-overlay: 255 255 255;
  --surface-overlay-alpha: 1;
  --surface-topnav: 255 255 255;
  --surface-topnav-alpha: 0.92;

  --glass-blur: 0px;
  --glass-saturation: 1;
  --glass-border-alpha: 1;

  --design-radius-sm: 8px;
  --design-radius-md: 12px;
  --design-radius-lg: 20px;
  --design-radius-xl: 28px;

  --design-shadow-card: 0 8px 24px rgba(17, 24, 39, 0.05);
  --design-shadow-elevated: 0 22px 56px rgba(17, 24, 39, 0.1);
  --design-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --texture-opacity: 0;
  --texture-image: none;
}

:root[data-design="design1"],
:root[data-design="design2"] {
  --paper: 248 247 243;
  --paper-dark: 240 238 232;
  --paper-border: 216 220 229;
  --ink: 31 42 64;
  --ink-light: 59 74 100;
  --ink-muted: 98 112 138;

  --sage-50: 238 245 255;
  --sage-100: 219 234 254;
  --sage-200: 191 219 254;
  --sage-300: 147 197 253;
  --sage-400: 96 165 250;
  --sage-500: 37 99 235;
  --sage-600: 29 78 216;
  --sage-700: 30 64 175;
  --sage-800: 30 58 138;

  --surface-card: 255 255 255;
  --surface-overlay: 251 253 255;
  --surface-topnav: 255 255 255;

  --texture-opacity: 0.26;
  --texture-image: radial-gradient(circle at 1px 1px, rgba(13, 74, 187, 0.08) 1px, transparent 0);
}

:root[data-design="design1"] {
  --surface-card-alpha: 1;
  --surface-overlay-alpha: 1;
  --surface-topnav-alpha: 0.92;
  --glass-blur: 0px;
  --glass-saturation: 1;
  --design-shadow-card: 0 8px 24px rgba(28, 50, 92, 0.08);
  --design-shadow-elevated: 0 28px 72px rgba(28, 50, 92, 0.15);
}

:root[data-design="design2"] {
  --surface-card-alpha: 0.72;
  --surface-overlay-alpha: 0.68;
  --surface-topnav-alpha: 0.56;
  --glass-blur: 14px;
  --glass-saturation: 1.4;
  --glass-border-alpha: 0.55;
  --design-shadow-card: 0 16px 34px rgba(37, 99, 235, 0.16);
  --design-shadow-elevated: 0 34px 86px rgba(37, 99, 235, 0.28);
  --texture-opacity: 0.32;
  --texture-image: radial-gradient(70% 80% at 18% 0%, rgba(125, 190, 255, 0.35), transparent 60%), radial-gradient(70% 80% at 82% 0%, rgba(77, 128, 255, 0.28), transparent 65%);
}

:root[data-design="design3"],
:root[data-design="design4"] {
  --paper: 242 246 255;
  --paper-dark: 229 238 252;
  --paper-border: 192 210 241;
  --ink: 16 30 60;
  --ink-light: 38 63 110;
  --ink-muted: 79 105 153;

  --sage-50: 229 241 255;
  --sage-100: 208 229 255;
  --sage-200: 180 212 255;
  --sage-300: 139 186 255;
  --sage-400: 99 159 252;
  --sage-500: 30 120 255;
  --sage-600: 13 91 219;
  --sage-700: 17 70 184;
  --sage-800: 24 56 143;

  --surface-card: 255 255 255;
  --surface-overlay: 249 252 255;
  --surface-topnav: 255 255 255;

  --texture-opacity: 0.34;
  --texture-image: radial-gradient(80% 90% at 20% 0%, rgba(92, 163, 255, 0.25), transparent 66%), radial-gradient(80% 90% at 90% 0%, rgba(0, 106, 255, 0.2), transparent 68%);
}

:root[data-design="design3"] {
  --surface-card-alpha: 1;
  --surface-overlay-alpha: 1;
  --surface-topnav-alpha: 0.9;
  --glass-blur: 0px;
  --glass-saturation: 1;
  --design-shadow-card: 0 16px 34px rgba(23, 63, 130, 0.12);
  --design-shadow-elevated: 0 34px 90px rgba(23, 63, 130, 0.24);
}

:root[data-design="design4"] {
  --surface-card-alpha: 0.66;
  --surface-overlay-alpha: 0.6;
  --surface-topnav-alpha: 0.5;
  --glass-blur: 18px;
  --glass-saturation: 1.55;
  --glass-border-alpha: 0.52;
  --design-shadow-card: 0 20px 40px rgba(13, 91, 219, 0.2);
  --design-shadow-elevated: 0 38px 98px rgba(13, 91, 219, 0.3);
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  transition: background-color var(--design-motion-normal), color var(--design-motion-normal), border-color var(--design-motion-normal);
}

#root {
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--texture-opacity);
  background-image: var(--texture-image);
  background-size: 20px 20px;
  z-index: -1;
}

.design-card {
  background-color: rgb(var(--surface-card) / var(--surface-card-alpha)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border-color: rgb(var(--paper-border) / var(--glass-border-alpha)) !important;
}

.design-card {
  border-radius: var(--design-radius-lg);
  box-shadow: var(--design-shadow-card);
}

.glass-surface {
  background-color: rgb(var(--surface-overlay) / var(--surface-overlay-alpha));
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(calc(var(--glass-saturation) + 0.1));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(calc(var(--glass-saturation) + 0.1));
  border: 1px solid rgb(var(--paper-border) / var(--glass-border-alpha));
}

[data-design] .rounded-xl {
  border-radius: var(--design-radius-lg);
}

[data-design] .rounded-2xl,
[data-design] .rounded-3xl {
  border-radius: var(--design-radius-xl);
}

[data-design] .shadow-sm,
[data-design] .shadow,
[data-design] .shadow-md,
[data-design] .shadow-lg,
[data-design] .shadow-xl {
  box-shadow: var(--design-shadow-card) !important;
}

[data-design] .lucide {
  stroke-width: var(--design-icon-stroke, 1.8) !important;
  stroke-linecap: var(--design-icon-linecap, round) !important;
  stroke-linejoin: var(--design-icon-linejoin, round) !important;
}

.flow-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
  mix-blend-mode: multiply;
}

.omni-panel-enter {
  animation: omni-panel-enter 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-design] .top-nav-pill {
  border-radius: 999px;
  border: 1px solid rgb(var(--paper-border) / var(--glass-border-alpha));
  background-color: rgb(var(--surface-topnav) / var(--surface-topnav-alpha));
  backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(calc(var(--glass-saturation) + 0.1));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(calc(var(--glass-saturation) + 0.1));
  box-shadow: var(--design-shadow-card);
}

[data-design="design2"] .top-nav-pill,
[data-design="design4"] .top-nav-pill {
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.16);
}

[data-design] .bg-paper,
[data-design] .bg-paper-dark {
  background-color: rgb(var(--paper)) !important;
}

[data-design] .bg-ink {
  background-color: rgb(var(--sage-600) / 1) !important;
}

[data-design] .text-white {
  color: white !important;
}

[data-design]:not([data-design="current"]) .uppercase {
  text-transform: none !important;
}

/* Key route refinements */
[data-design] [data-route-surface="landing"] .hero-enter {
  animation: hero-fade-up var(--design-motion-slow, 420ms) var(--design-motion-standard, cubic-bezier(0.2, 0.7, 0.2, 1)) both;
}

[data-design] [data-route-surface="hub"] .hub-card-enter {
  animation: hub-fade-up 560ms var(--design-motion-standard, cubic-bezier(0.2, 0.7, 0.2, 1)) both;
}

[data-design] [data-route-surface="problem-selection"] .problem-list-sticky-filter {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(var(--paper-border) / var(--glass-border-alpha));
}

[data-design="design2"] [data-route-surface="problem-selection"] .problem-list-sticky-filter .rounded-full,
[data-design="design4"] [data-route-surface="problem-selection"] .problem-list-sticky-filter .rounded-full {
  backdrop-filter: blur(calc(var(--glass-blur) + 2px));
}

[data-design] [data-route-surface="problem-detail"] .prose {
  line-height: 1.8;
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hub-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes omni-panel-enter {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}