:root {
  /* Colors */
  --clay-primary: #000000;
  --clay-surface: #fefdfb;
  --clay-surface-subtle: #f4f3f0;
  --clay-blueberry: #3859f9;
  --clay-matcha: #078a52;
  --clay-matcha-deep: #03331d;
  --clay-dragonfruit: #cc089e;
  --clay-lemon: #fcbe11;
  --clay-tangerine: #fa6900;
  --clay-oat-secondary: #55534e;
  --clay-hairline: #e6e8ec;
  
  /* Radius */
  --clay-radius-xl: 40px;
  --clay-radius-lg: 32px;
  --clay-radius-md: 24px;
  --clay-radius-sm: 12px;
  --clay-radius-xs: 8px;
  --clay-radius-full: 9999px;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* Base resets & fonts */
body {
  background-color: var(--clay-surface);
  color: var(--clay-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  line-height: 1.4;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 800;
}

.font-tight {
  letter-spacing: -0.04em;
  line-height: 1.0;
}

.font-mono {
  font-family: var(--font-mono);
}

/* Layout Utilities */
.clay-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

@media (max-width: 768px) {
  .clay-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.clay-grid {
  display: grid;
  gap: 32px;
}

/* Components */
.clay-card {
  background: white;
  border-radius: var(--clay-radius-xl);
  padding: 40px;
  border: 1px solid var(--clay-hairline);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.clay-card:hover {
  transform: translateY(-12px);
}

.btn-clay-primary {
  background: var(--clay-primary);
  color: white !important;
  padding: 16px 32px;
  border-radius: var(--clay-radius-sm);
  font-weight: 700;
  font-size: 18px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-clay-primary:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}

.btn-clay-secondary {
  background: white;
  color: var(--clay-primary) !important;
  padding: 16px 32px;
  border-radius: var(--clay-radius-sm);
  font-weight: 700;
  font-size: 18px;
  border: 2px solid var(--clay-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-clay-secondary:hover {
  background-color: var(--clay-surface-subtle);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--clay-radius-full);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-active { background: #dcfce7; color: #166534; }
.status-draft { background: #fef9c3; color: #854d0e; }

/* Animation Keyframes */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Utilities */
.text-accent { color: var(--clay-blueberry); }
.text-matcha { color: var(--clay-matcha); }
.bg-matcha { background-color: var(--clay-matcha); color: white; }
.bg-blueberry { background-color: var(--clay-blueberry); color: white; }
.bg-dragonfruit { background-color: var(--clay-dragonfruit); color: white; }
.bg-oat-panel { background-color: var(--clay-surface-subtle); }