/* Seven Gables Studio UI — design tokens & primitives
   Framework-free. Source of truth mirrors marketing-studio/src/app/globals.css;
   palette from docs/inspiration.png. */

:root {
  --canvas: #f6f3ee; /* cream page background */
  --ink: #1c1b1a; /* dark panels (sidebar/chat) */
  --card: #ffffff;
  --text: #1c1b1a;
  --text-muted: #757069;
  --accent: #14b8a6; /* Inside SG: teal accent (kit shipped orange) */
  --accent-from: #2dd4bf; /* gradient runs from → to */
  --accent-to: #0d9488;
  --border: #e8e2d8;
  /* pastel stat chips */
  --chip-peach: #ffe8d9;
  --chip-peach-fg: #8a3413;
  --chip-mint: #dff5e9;
  --chip-mint-fg: #1d6b43;
  --chip-lavender: #ece6fa;
  --chip-lavender-fg: #4f3d8c;
  --chip-sky: #e2f0fb;
  --chip-sky-fg: #1e5a8a;
  /* shape */
  --radius-card: 16px;
  --radius-panel: 24px; /* rounded panels & sidebar */
}

.gradient-accent {
  background-image: linear-gradient(135deg, var(--accent-from) 0%, var(--accent-to) 100%);
}

.shadow-card {
  box-shadow: 0 1px 2px rgb(28 27 26 / 0.04), 0 8px 24px rgb(28 27 26 / 0.06);
}

.shadow-card-hover {
  box-shadow: 0 2px 4px rgb(28 27 26 / 0.05), 0 16px 40px rgb(28 27 26 / 0.1);
}

/* Motion primitives — CSS keyframes on purpose: they run identically in
   every engine (Framer/WAAPI animations can silently fail to start inside
   portals on WebKit). Overshooting bezier ≈ liquid settle. */
@keyframes studio-drawer-in {
  from { transform: translateX(-115%); }
  to { transform: translateX(0); }
}
@keyframes studio-drawer-out {
  from { transform: translateX(0); }
  to { transform: translateX(-115%); }
}
@keyframes studio-item-in {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes studio-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.studio-drawer-in { animation: studio-drawer-in 480ms cubic-bezier(0.34, 1.45, 0.64, 1); }
.studio-drawer-out { animation: studio-drawer-out 200ms cubic-bezier(0.5, 0, 0.9, 0.4); }
.studio-item-in { animation: studio-item-in 380ms cubic-bezier(0.22, 1.35, 0.5, 1) backwards; }
.studio-fade-in { animation: studio-fade-in 200ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .studio-drawer-in,
  .studio-drawer-out,
  .studio-item-in,
  .studio-fade-in {
    animation-duration: 1ms;
  }
}