/* tu-xing theme tokens — CSS variables driving every component's color
 * and shape. Override these in your project root to retheme. The dark
 * palette is the default; toggle by setting `data-theme="light"` on a
 * parent element.
 *
 * Inspired by shadcn/ui's HSL-channel approach (so per-component opacity
 * tweaks can target individual values) layered with baseui's named
 * design tokens (so themes are composable, not just color swaps).
 */

@layer tu-xing.theme {
  :root,
  [data-theme='dark'] {
    /* Surface */
    --tu-bg: 222 47% 7%;
    --tu-surface: 222 47% 11%;
    --tu-surface-elevated: 222 47% 15%;
    --tu-border: 222 30% 22%;

    /* Foreground */
    --tu-fg: 220 14% 96%;
    --tu-fg-muted: 220 9% 65%;

    /* Brand — used by Button.primary, Switch on, Tabs active. */
    --tu-brand: 239 84% 67%;
    --tu-brand-fg: 220 14% 99%;
    --tu-brand-hover: 239 84% 75%;

    /* Semantic */
    --tu-success: 160 84% 45%;
    --tu-warning: 38 92% 50%;
    --tu-danger: 0 84% 60%;

    /* Geometry */
    --tu-radius-sm: 0.375rem;
    --tu-radius: 0.5rem;
    --tu-radius-lg: 0.75rem;
    --tu-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.5);
  }

  [data-theme='light'] {
    --tu-bg: 0 0% 100%;
    --tu-surface: 0 0% 98%;
    --tu-surface-elevated: 0 0% 100%;
    --tu-border: 220 13% 91%;

    --tu-fg: 222 47% 11%;
    --tu-fg-muted: 222 11% 45%;

    --tu-brand: 239 84% 60%;
    --tu-brand-fg: 0 0% 100%;
    --tu-brand-hover: 239 84% 55%;

    --tu-success: 160 84% 35%;
    --tu-warning: 38 92% 45%;
    --tu-danger: 0 84% 50%;

    --tu-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.15);
  }
}