@import 'tailwindcss';
@import 'tw-animate-css';
@import '@cherrystudio/ui/styles/theme.css';
@import './legacy-vars.css';

@source '../../../../packages/ui/src/**/*.{js,ts,jsx,tsx}';
@source '../../../../node_modules/streamdown/dist/*.js';
@source '../../../../node_modules/@streamdown/code/dist/*.js';
@source '../../../../node_modules/@streamdown/cjk/dist/*.js';
@source '../../../../node_modules/@streamdown/math/dist/*.js';
@source '../../../../node_modules/@streamdown/mermaid/dist/*.js';
@custom-variant dark (&:is(.dark *));

/*
 * Application-side Tailwind bridge for @cherrystudio/ui.
 *
 * Organization guidelines:
 * 1. Keep shared design-system tokens in `@cherrystudio/ui/styles/*`.
 * 2. Keep renderer-only shell tokens in this file.
 * 3. Place global element resets in `@layer base`.
 * 4. Add renderer-only reusable patterns in `@layer components` when needed.
 * 5. Add custom utilities in `@layer utilities`.
 *
 * TODO(v2-ui): Gradually remove the legacy compatibility variables in this file
 * as renderer surfaces migrate from old `var(--color-*)` usage to the shared
 * `@cherrystudio/ui` theme contract and Tailwind semantic utilities.
 */

/* App shell tokens: light mode */
:root {
  --app-icon: #00000099;

  --app-sidebar: oklch(0.9672 0 0);
  --app-sidebar-accent: oklch(0.97 0 0);
  --app-sidebar-foreground: oklch(0.145 0 0);
  --app-sidebar-active-bg: rgba(16, 185, 129, 0.08);
  --app-sidebar-active-border: rgba(16, 185, 129, 0.15);
  --app-sidebar-glow-bg: rgba(16, 185, 129, 0.25);
  --app-sidebar-glow-line: rgba(16, 185, 129, 0.5);
  --app-sidebar-primary: oklch(0.205 0 0);
  --app-sidebar-primary-foreground: oklch(0.985 0 0);
  --app-sidebar-accent-foreground: oklch(0.205 0 0);
  --app-sidebar-border: oklch(0.922 0 0);
  --app-sidebar-ring: oklch(0.708 0 0);

  --app-primary-foreground: oklch(0.985 0 0);
  --app-card-foreground: oklch(0.145 0 0);
  --app-popover-foreground: oklch(0.145 0 0);
  --app-secondary-foreground: oklch(0.205 0 0);
  --app-muted-foreground: oklch(0.556 0 0);
  --app-accent-foreground: oklch(0.205 0 0);
  --app-destructive-foreground: oklch(0.577 0.245 27.325);
  --app-input: oklch(0.922 0 0);

}

/* App shell tokens: dark mode */
.dark {
  --app-icon: #ffffff99;

  --app-sidebar: oklch(0.2393 0 0);
  --app-sidebar-accent: oklch(0.269 0 0);
  --app-sidebar-foreground: oklch(0.985 0 0);
  --app-sidebar-active-bg: rgba(114, 255, 121, 0.05);
  --app-sidebar-active-border: rgba(114, 255, 121, 0.08);
  --app-sidebar-glow-bg: rgba(114, 255, 121, 0.15);
  --app-sidebar-glow-line: rgba(114, 255, 121, 0.35);
  --app-sidebar-primary: oklch(0.488 0.243 264.376);
  --app-sidebar-primary-foreground: oklch(0.985 0 0);
  --app-sidebar-accent-foreground: oklch(0.985 0 0);
  --app-sidebar-border: oklch(0.269 0 0);
  --app-sidebar-ring: oklch(0.439 0 0);

  --app-primary-foreground: oklch(0.205 0 0);
  --app-card-foreground: oklch(0.985 0 0);
  --app-popover-foreground: oklch(0.985 0 0);
  --app-secondary-foreground: oklch(0.985 0 0);
  --app-muted-foreground: oklch(0.708 0 0);
  --app-accent-foreground: oklch(0.985 0 0);
  --app-destructive-foreground: oklch(0.637 0.237 25.331);
  --app-input: oklch(0.269 0 0);

}

/*
 * Tailwind bridge for renderer-owned tokens.
 *
 * Keep this section limited to app-shell tokens and compatibility aliases that
 * are still required during the migration.
 */
@theme inline {
  --color-icon: var(--app-icon);

  --color-primary-foreground: var(--app-primary-foreground);
  --color-card-foreground: var(--app-card-foreground);
  --color-popover-foreground: var(--app-popover-foreground);
  --color-secondary-foreground: var(--app-secondary-foreground);
  --color-muted-foreground: var(--app-muted-foreground);
  --color-accent-foreground: var(--app-accent-foreground);
  --color-destructive-foreground: var(--app-destructive-foreground);
  --color-input: var(--app-input);

  --color-sidebar: var(--app-sidebar);
  --color-sidebar-accent: var(--app-sidebar-accent);
  --color-sidebar-foreground: var(--app-sidebar-foreground);
  --color-sidebar-primary: var(--app-sidebar-primary);
  --color-sidebar-primary-foreground: var(--app-sidebar-primary-foreground);
  --color-sidebar-accent-foreground: var(--app-sidebar-accent-foreground);
  --color-sidebar-border: var(--app-sidebar-border);
  --color-sidebar-ring: var(--app-sidebar-ring);
  --color-sidebar-active-bg: var(--app-sidebar-active-bg);
  --color-sidebar-active-border: var(--app-sidebar-active-border);
  --color-sidebar-glow-bg: var(--app-sidebar-glow-bg);
  --color-sidebar-glow-line: var(--app-sidebar-glow-line);

}

@layer base {
  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }
}

/* Let the Electron window surface control the document background. */
:root {
  background-color: unset;
}
