@import "tailwindcss";

/*
  YuE2 Studio design tokens.

  Theme lock: the console is dark only. There is no light variant, and no
  section inverts.
  Accent lock: one accent (citron) across every surface. Red appears only for
  real failure state, never as decoration.
  Shape lock: 4px radius on every panel, input and button. The documented
  exception is play buttons, which are circular: the transport in the dock and
  the smaller reference preview.
*/
@theme {
  --color-void: #0b0b0c;
  --color-panel: #121215;
  --color-raised: #17171b;
  --color-line: #232329;
  --color-line-strong: #33333b;
  --color-ink: #ebebe8;
  --color-ink-dim: #9d9d99;
  --color-ink-faint: #6b6b68;
  --color-citron: #c7e84f;
  --color-citron-dim: #96b02f;
  --color-alarm: #e2574c;

  --radius-console: 4px;

  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
}

@layer base {
  html {
    color-scheme: dark;
  }

  body {
    background-color: var(--color-void);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background-color: var(--color-citron);
    color: var(--color-void);
  }

  /* One focus treatment for the whole console. */
  :where(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--color-citron);
    outline-offset: 2px;
    border-radius: var(--radius-console);
  }

  textarea,
  input,
  select {
    font-family: inherit;
  }
}

@layer utilities {
  .console-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-line-strong) transparent;
  }

  .console-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .console-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-line-strong);
    border: 3px solid var(--color-void);
    border-radius: 999px;
  }

  /* Faint horizontal rule of the kind found on a mixing desk faceplate. */
  .faceplate {
    background-image: repeating-linear-gradient(
      90deg,
      var(--color-line) 0px,
      var(--color-line) 1px,
      transparent 1px,
      transparent 7px
    );
  }
}

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