:root {
  /* Fluid Typography - Min: 16px, Max: 20px */
  --font-size-base: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
  --font-size-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --font-size-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  
  /* Color Tokens - Premium Slate/Indigo/Violet Palette */
  --color-primary: 79 70 229; /* Indigo 600 */
  --color-secondary: 139 92 246; /* Violet 500 */
  --color-accent: 236 72 153; /* Pink 500 */
  --color-surface-900: 15 23 42; /* Slate 900 */
  --color-surface-800: 30 41 59; /* Slate 800 */
  --color-surface-50: 248 250 252; /* Slate 50 */
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 12px;
}

/* CUBE CSS: Composition */
.stack > * + * {
  margin-top: var(--stack-space, 1.5rem);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space, 1rem);
  align-items: center;
}

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-space, 2rem);
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min, 50%);
}

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--repel-space, 1rem);
}

/* CUBE CSS: Block */
.card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgb(226, 232, 240);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.card__header {
  border-bottom: 1px solid rgb(241, 245, 249);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

/* CUBE CSS: Exception */
[data-state='active'] {
  border-color: rgb(var(--color-primary));
  background: rgba(var(--color-primary), 0.05);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease forwards;
}