/**
 * Semantic Colors - Light Mode
 * 语义化颜色 - 基于 Primitive Colors 的语义化映射
 */

:root {
  /* Brand Colors */
  --cs-primary: var(--cs-brand-500);
  --cs-primary-hover: var(--cs-brand-300);
  --cs-destructive: var(--cs-red-500);
  --cs-destructive-hover: var(--cs-red-400);
  --cs-success: var(--cs-green-500);
  --cs-warning: var(--cs-amber-500);
  --cs-info: var(--cs-blue-500);

  /* Background & Foreground */
  --cs-background: var(--cs-white);
  --cs-background-subtle: oklch(0 0 0 / 0.02);
  --cs-foreground: oklch(0 0 0 / 0.9);
  --cs-foreground-secondary: oklch(0 0 0 / 0.6);
  --cs-foreground-muted: oklch(0 0 0 / 0.4);

  /* Menu item hover/focus background — distinct from --cs-background-subtle
   * because menu rows need a bit more contrast than generic subtle surfaces. */
  --cs-menu-item-hover: oklch(0 0 0 / 0.04);

  /* Card & Popover */
  --cs-card: var(--cs-white);
  --cs-popover: var(--cs-white);

  /* Border */
  --cs-border: oklch(0 0 0 / 0.1);
  --cs-border-muted: oklch(0 0 0 / 0.06);
  --cs-border-subtle: oklch(0 0 0 / 0.04);
  --cs-border-hover: oklch(0 0 0 / 0.2);
  --cs-border-active: oklch(0 0 0 / 0.3);
  --cs-frame-border: oklch(0 0 0 / 0.12);

  /* Ring (Focus) */
  --cs-ring: color-mix(in srgb, var(--cs-primary) 40%, transparent);

  /* UI Element Colors */
  --cs-secondary: oklch(0 0 0 / 0.05); /* Secondary Button Background */
  --cs-secondary-hover: oklch(0 0 0 / 0.1);
  --cs-secondary-active: oklch(0 0 0 / 0.15);
  --cs-muted: oklch(0 0 0 / 0.05); /* Muted/Subtle Background */
  --cs-accent: oklch(0 0 0 / 0.05); /* Accent Background */
  --cs-ghost-hover: oklch(0 0 0 / 0.05); /* Ghost Button Hover */
  --cs-ghost-active: oklch(0 0 0 / 0.1); /* Ghost Button Active */

  /* Sidebar */
  --cs-sidebar: oklch(0.9672 0 0);
  --cs-sidebar-accent: oklch(0 0 0 / 0.05);

  /* Surface-paired foregrounds — all neutral surfaces share the app foreground.
   * These tokens exist so Tailwind utilities like `text-card-foreground`,
   * `text-popover-foreground`, `text-secondary-foreground`, `text-accent-foreground`
   * resolve to a defined value instead of falling back to inheritance. */
  --cs-card-foreground: var(--cs-foreground);
  --cs-popover-foreground: var(--cs-foreground);
  --cs-secondary-foreground: var(--cs-foreground);
  --cs-accent-foreground: var(--cs-foreground);

  /* Inverted foregrounds — used on solid colored fills (primary/destructive buttons).
   * Kept as pure white so they stay legible regardless of light/dark mode shifts on the fill. */
  --cs-primary-foreground: var(--cs-white);
  --cs-destructive-foreground: var(--cs-white);

  /* Input border — mirrors the app border so input outlines match neighbouring dividers. */
  --cs-input: var(--cs-border);

  /* Sidebar sub-palette — mirrors app-level neutrals so the sidebar zone stays consistent
   * without introducing a separate chromatic scale. */
  --cs-sidebar-foreground: var(--cs-foreground);
  --cs-sidebar-primary: var(--cs-secondary);
  --cs-sidebar-primary-foreground: var(--cs-foreground);
  --cs-sidebar-accent-foreground: var(--cs-foreground);
  --cs-sidebar-border: var(--cs-border);
  --cs-sidebar-ring: var(--cs-ring);
}

/* Dark Mode */
.dark {
  --cs-success: var(--cs-green-400);
  --cs-warning: var(--cs-amber-400);
  --cs-info: var(--cs-blue-400);

  /* Background & Foreground */
  --cs-background: oklch(0.209 0 0 / 0.55);
  --cs-background-subtle: oklch(1 0 0 / 0.02);
  --cs-foreground: oklch(1 0 0 / 0.9);
  --cs-foreground-secondary: oklch(1 0 0 / 0.6);
  --cs-foreground-muted: oklch(1 0 0 / 0.4);

  /* Menu item hover/focus background (dark) — see comment in :root. */
  --cs-menu-item-hover: oklch(1 0 0 / 0.06);

  /* Card & Popover */
  --cs-card: var(--cs-neutral-900);
  --cs-popover: var(--cs-black);

  /* Border */
  --cs-border: oklch(1 0 0 / 0.1);
  --cs-border-muted: oklch(1 0 0 / 0.08);
  --cs-border-subtle: oklch(1 0 0 / 0.05);
  --cs-border-hover: oklch(1 0 0 / 0.2);
  --cs-border-active: oklch(1 0 0 / 0.3);
  --cs-frame-border: oklch(1 0 0 / 0.14);

  /* Ring (Focus) - 保持不变 */
  --cs-ring: oklch(0.76 0.204 131 / 0.4);

  /* UI Element Colors - Dark Mode */
  --cs-secondary: oklch(1 0 0 / 0.1); /* Secondary Button Background */
  --cs-secondary-hover: oklch(1 0 0 / 0.2);
  --cs-secondary-active: oklch(1 0 0 / 0.25);
  --cs-muted: oklch(1 0 0 / 0.1); /* Muted/Subtle Background */
  --cs-accent: oklch(1 0 0 / 0.1); /* Accent Background */
  --cs-ghost-hover: oklch(1 0 0 / 0.1); /* Ghost Button Hover */
  --cs-ghost-active: oklch(1 0 0 / 0.15); /* Ghost Button Active */

  /* Sidebar */
  --cs-sidebar: oklch(0.2393 0 0);
  --cs-sidebar-accent: oklch(1 0 0 / 0.1);
}
