/* Light and dark are two token sets, same roles as Live Mockup.
   Components read these variables. They are not a repaint of slate/indigo classes. */

:root {
  color-scheme: light;
  --background: #f7f7f7;
  --foreground: #171717;
  --card: #ffffff;
  --card-foreground: #171717;
  --popover: #ffffff;
  --popover-foreground: #171717;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f0f0f0;
  --accent-foreground: #171717;
  --destructive: #e11d48;
  --border: #ebebeb;
  --input: #ebebeb;
  --ring: #a3a3a3;
  --sidebar: #ffffff;
  --canvas: #f7f7f7;
  --switch: #d4d4d4;
  --radius: 0.625rem;
  --shadow-panel: 0 10px 30px rgba(23, 23, 23, 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --canvas: oklch(0.145 0 0);
  --switch: oklch(0.37 0 0);
  --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.45);
}

html, body, #root {
  background: var(--background);
  color: var(--foreground);
  font-family: Geist, ui-sans-serif, system-ui, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: color-mix(in oklch, var(--foreground) 16%, transparent);
  color: var(--foreground);
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--foreground) 22%, transparent);
  border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklch, var(--foreground) 36%, transparent);
}

@keyframes studio-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes studio-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes studio-in-left {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes studio-in-right {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes logo-turn {
  from { transform: rotate(-36deg); }
  to { transform: rotate(0deg); }
}
@keyframes logo-petal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes logo-spin {
  to { transform: rotate(360deg); }
}
@keyframes logo-petal-loop {
  0% { opacity: 0; }
  14% { opacity: 1; }
  46% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

.studio-fade { animation: studio-fade 180ms ease-out both; }
.studio-in,
.studio-card { animation: studio-in 200ms ease-out both; }
.shell-in { animation: studio-in-left 180ms ease-out both; }
.shell-out { animation: studio-in-left 180ms ease-out reverse both; }
.drawer-in { animation: studio-in-right 200ms ease-out both; }
.drawer-out { animation: studio-in-right 180ms ease-out reverse both; }
.refine-drawer-in { animation: studio-in-right 180ms ease-out both; }
.refine-drawer-out { animation: studio-in-right 160ms ease-out reverse both; }
.logo-mark {
  transform-box: view-box;
  transform-origin: center;
}
.logo-mark--enter {
  animation: logo-turn 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.logo-mark--enter .logo-petal {
  opacity: 0;
  animation: logo-petal-in 120ms ease-out both;
}
.logo-mark--enter .logo-petal:nth-child(1) { animation-delay: 0ms; }
.logo-mark--enter .logo-petal:nth-child(2) { animation-delay: 45ms; }
.logo-mark--enter .logo-petal:nth-child(3) { animation-delay: 90ms; }
.logo-mark--enter .logo-petal:nth-child(4) { animation-delay: 135ms; }
.logo-mark--enter .logo-petal:nth-child(5) { animation-delay: 180ms; }
.logo-mark--enter .logo-petal:nth-child(6) { animation-delay: 225ms; }
.logo-mark--loading {
  animation: logo-spin 3.6s linear infinite;
}
.logo-mark--loading .logo-petal {
  animation: logo-petal-loop 1.8s linear infinite both;
}
.logo-mark--loading .logo-petal:nth-child(1) { animation-delay: 0s; }
.logo-mark--loading .logo-petal:nth-child(2) { animation-delay: 0.3s; }
.logo-mark--loading .logo-petal:nth-child(3) { animation-delay: 0.6s; }
.logo-mark--loading .logo-petal:nth-child(4) { animation-delay: 0.9s; }
.logo-mark--loading .logo-petal:nth-child(5) { animation-delay: 1.2s; }
.logo-mark--loading .logo-petal:nth-child(6) { animation-delay: 1.5s; }

/* Hover wordmark: the whole name fades in, then fades out when the pointer leaves. */
.logo-wordmark {
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1);
}
.group:hover .logo-wordmark,
.group:focus-visible .logo-wordmark {
  opacity: 1;
  transition-duration: 640ms;
}

@keyframes describe-word-in {
  from { opacity: 0; transform: translateY(0.35em); }
  to { opacity: 1; transform: none; }
}
@keyframes describe-word-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-0.35em); }
}
.describe-word-in { animation: describe-word-in 160ms ease-out both; }
.describe-word-out { animation: describe-word-out 160ms ease-out both; }

.oklch-dot,
.oklch-ring,
.oklch-swatch {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 140ms cubic-bezier(0.2, 0, 0, 1), opacity 140ms cubic-bezier(0.2, 0, 0, 1), box-shadow 140ms cubic-bezier(0.2, 0, 0, 1);
}
.oklch-dot[data-selected="true"] { transform: scale(1.32); }
.oklch-ring {
  opacity: 0;
  transform: scale(0.7);
}
.oklch-ring[data-selected="true"] {
  opacity: 0.9;
  transform: scale(1);
}

@keyframes dialog-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dialog-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes dialog-pop-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes dialog-pop-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.96); }
}
@keyframes swatch-in {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: none; }
}
.dialog-fade-in { animation: dialog-fade-in 180ms ease-out both; }
.dialog-fade-out { animation: dialog-fade-out 140ms ease-in both; }
.dialog-in { animation: dialog-pop-in 180ms ease-out both; }
.dialog-out { animation: dialog-pop-out 140ms ease-in both; }
.swatch-in { animation: swatch-in 240ms ease-out both; }

@keyframes color-info-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes color-info-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.96); }
}
.color-info-pop {
  width: 17.5rem;
}

@keyframes palette-color-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes palette-color-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.96); }
}
@media (max-width: 1023px) {
  .drawer-in,
  .drawer-out { animation-name: studio-in; }
}

/* Shade row: Shades, Vibrancy, Contrast, Hue blend.
   Track and knob stay on black, white, and gray tokens in both themes. */
.scale-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  height: 16px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--foreground);
}

.scale-slider:focus {
  outline: none;
}

.scale-slider::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--foreground) 0%,
    var(--foreground) var(--range-fill, 0%),
    var(--switch) var(--range-fill, 0%),
    var(--switch) 100%
  );
}

.scale-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 1.5px solid var(--foreground);
  border-radius: 999px;
  background: var(--card);
  box-shadow: none;
}

.scale-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--ring);
}

.scale-slider::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--foreground) 0%,
    var(--foreground) var(--range-fill, 0%),
    var(--switch) var(--range-fill, 0%),
    var(--switch) 100%
  );
}

.scale-slider::-moz-range-progress {
  background: transparent;
}

.scale-slider::-moz-range-thumb {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--foreground);
  border-radius: 999px;
  background: var(--card);
  box-shadow: none;
}

.scale-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--ring);
}

/* Line drawings are black ink. A light disk keeps the strokes visible in light and dark. */
.account-avatar-disk {
  background: #f7f7f7;
  box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.16);
}

.account-avatar-disk[aria-checked="true"] {
  box-shadow: inset 0 0 0 2px #171717;
}

@media (prefers-reduced-motion: reduce) {
  .studio-fade,
  .studio-in,
  .studio-card,
  .shell-in,
  .shell-out,
  .drawer-in,
  .drawer-out,
  .refine-drawer-in,
  .refine-drawer-out,
  .logo-mark,
  .logo-mark--enter,
  .logo-mark--loading,
  .describe-word-in,
  .describe-word-out,
  .dialog-fade-in,
  .dialog-fade-out,
  .dialog-in,
  .dialog-out,
  .swatch-in,
  .color-info-pop,
  .palette-color-pop {
    animation: none;
  }
  .oklch-dot,
  .oklch-ring,
  .oklch-swatch {
    transition: none;
  }
  .logo-mark--enter .logo-petal,
  .logo-mark--loading .logo-petal {
    animation: none;
    opacity: 1;
  }
  .logo-wordmark,
  .group:hover .logo-wordmark,
  .group:focus-visible .logo-wordmark {
    opacity: 1;
    transition: none;
  }
}