:root {
  /* Surface + ink scale. Warmer ink-muted (was 122 122 122) and slightly
     stronger paper-border (was 224 222 217) so 1-px borders read on white. */
  --paper: 253 251 247;
  --paper-dark: 245 242 235;
  --paper-elev: 250 247 242;
  --paper-border: 218 214 206;
  --ink: 26 26 26;
  --ink-light: 74 74 74;
  --ink-muted: 110 108 102;
  --ink-faint: 158 154 145;

  --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;

  /* Clay replaces amber for the Number Theory family. Lower chroma than
     amber so it sits alongside sage/terracotta/slate without screaming. */
  --clay-50: 245 234 218;
  --clay-100: 234 219 200;
  --clay-200: 217 198 173;
  --clay-300: 191 167 138;
  --clay-400: 159 132 99;
  --clay-500: 122 96 65;
  --clay-600: 102 78 50;
  --clay-700: 94 70 40;
  --clay-800: 72 54 30;

  --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;

  /* Difficulty pill tones (value-matched to topic palette). */
  --diff-easy-bg: 224 234 224;
  --diff-easy-text: 58 88 58;
  --diff-medium-bg: 234 219 200;
  --diff-medium-text: 124 84 36;
  --diff-hard-bg: 240 218 213;
  --diff-hard-text: 132 56 50;

  /* State colours (success / warning / error / info). */
  --state-success: 64 124 80;
  --state-success-bg: 225 240 228;
  --state-warning: 156 102 36;
  --state-warning-bg: 244 228 196;
  --state-error: 162 56 48;
  --state-error-bg: 244 220 215;
  --state-info: 60 92 132;
  --state-info-bg: 222 232 244;

  --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;

  /* Canonical radius scale. Tailwind utility classes are rebound below
     so JSX usage of rounded-md/lg/xl/2xl/3xl picks these up automatically. */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Legacy aliases kept until callsites migrate to --r-*. */
  --design-radius-sm: var(--r-sm);
  --design-radius-md: var(--r-md);
  --design-radius-lg: var(--r-lg);
  --design-radius-xl: var(--r-xl);

  --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;
  --background-atmosphere-opacity: 1;
}

/* Bind Tailwind radius utilities to the scale above so the whole app uses
   one set of radii rather than a mix of Tailwind defaults + ad-hoc px values. */
.rounded-md  { border-radius: var(--r-sm); }
.rounded-lg  { border-radius: var(--r-md); }
.rounded-xl  { border-radius: var(--r-lg); }
.rounded-2xl { border-radius: var(--r-xl); }
.rounded-3xl { border-radius: var(--r-xl); }

:root[data-low-performance="true"] {
  --background-atmosphere-opacity: 0;
  --design-motion-fast: 0ms;
  --design-motion-normal: 0ms;
  --design-motion-slow: 0ms;
}

:root[data-low-performance="true"] *,
:root[data-low-performance="true"] *::before,
:root[data-low-performance="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

:root[data-low-performance="true"] .surface-hover-float::after {
  display: none !important;
}

:root[data-low-performance="true"] .surface-hover-float:hover,
:root[data-low-performance="true"] [class*="hover:-translate"]:hover,
:root[data-low-performance="true"] [class*="hover:scale"]:hover {
  transform: none !important;
  box-shadow: var(--design-shadow-card) !important;
}

:root[data-low-performance="true"] [class*="group-hover:translate"],
:root[data-low-performance="true"] [class*="group-hover:scale"] {
  transform: none !important;
}

:root[data-low-performance="true"] .hero-enter,
:root[data-low-performance="true"] .landing-card-enter,
:root[data-low-performance="true"] .landing-badge-drift,
:root[data-low-performance="true"] .carousel-swap,
:root[data-low-performance="true"] .hub-card-enter,
:root[data-low-performance="true"] .hub-surface-enter,
:root[data-low-performance="true"] .hub-stat-enter,
:root[data-low-performance="true"] .hub-rail-item {
  animation: none !important;
  transform: none !important;
}

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: calc(var(--texture-opacity) * var(--background-atmosphere-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));
}

.flow-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: calc(0.95 * var(--background-atmosphere-opacity));
  mix-blend-mode: multiply;
}

.flow-backdrop-svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: flow-drift 36s ease-in-out infinite alternate;
  will-change: transform;
  transform-origin: center;
}

.flow-backdrop-svg--static {
  animation: none;
}

@keyframes flow-drift {
  from {
    transform: translate3d(-1.2%, -1.6%, 0) scale(1.03);
  }
  to {
    transform: translate3d(1.2%, 1.6%, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-backdrop-svg {
    animation: none;
  }
}

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

.surface-hover-float {
  position: relative;
  overflow: hidden;
  transition:
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 160ms ease,
    background-color 160ms ease;
}

.surface-hover-float::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(118deg, transparent 8%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.28) 50%, transparent 64%);
  transform: translateX(-125%);
}

.surface-hover-float:hover {
  transform: translateY(-3px);
  box-shadow: var(--design-shadow-elevated);
}

.surface-hover-float:hover::after {
  opacity: 1;
  animation: sheen-pass 920ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-route-surface="landing"] .hero-enter {
  animation: hero-fade-up 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

[data-route-surface="landing"] .landing-card-enter {
  animation: card-fade-up 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

[data-route-surface="landing"] .landing-badge-drift {
  animation: badge-drift 8s ease-in-out infinite;
}

[data-route-surface="landing"] .carousel-swap {
  animation: carousel-swap-in 540ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

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

[data-route-surface="hub"] .hub-surface-enter,
[data-route-surface="hub"] .hub-stat-enter,
[data-route-surface="hub"] .hub-rail-item {
  animation: card-fade-up 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

[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);
  }
}

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

@keyframes sheen-pass {
  from {
    transform: translateX(-125%);
  }
  to {
    transform: translateX(125%);
  }
}

@keyframes carousel-swap-in {
  from {
    opacity: 0;
    transform: translateY(12px) translateX(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
}

@keyframes badge-drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}