/* CodexKit brand tokens — pulled from DESIGN.md (Editorial Playground) */
:root {
  --surface: #fff8f5;
  --surface-container-low: #faf2ee;
  --surface-container: #f4ece8;
  --surface-container-high: #eee7e3;
  --surface-container-highest: #e9e1dd;
  --surface-container-lowest: #ffffff;

  --on-surface: #1e1b19;
  --on-surface-variant: #51424e;
  --tertiary: #605b58;
  --outline: #83727f;
  --outline-variant: #d5c1cf;

  --primary: #923494;
  --primary-container: #f5e3f5;
  --on-primary-container: #37003a;
  --primary-dark: #791a7c;

  --secondary: #775a00;
  --secondary-container: #fecb44;
  --on-secondary-container: #5a4300;
  --secondary-fixed: #ffdf97;
  --secondary-fixed-dim: #f1c039;

  --error: #ba1a1a;
  --success: #2e7d4f;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Signature gradient */
.gradient-primary {
  background: linear-gradient(135deg, #791a7c 0%, #923494 50%, #af4eaf 100%);
}
.gradient-primary-text {
  background: linear-gradient(135deg, #791a7c 0%, #af4eaf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Ambient shadow per DESIGN.md §4 */
.ambient-shadow {
  box-shadow: 0 20px 40px rgba(51, 48, 45, 0.06);
}
.ambient-shadow-lg {
  box-shadow: 0 30px 60px rgba(51, 48, 45, 0.08), 0 8px 16px rgba(146, 52, 148, 0.05);
}

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}