/* =============================================================================
   shadcn/ui compatibility aliases
   -----------------------------------------------------------------------------
   Maps shadcn's semantic CSS variable names to crusher-ui-kit's semantic layer
   so codebases migrating from shadcn keep their variable references working.
   The values flow from crusher's current mode + dialect — switch dialect or
   light/dark mode and the shadcn aliases follow.

   Uses shadcn's modern direct-color convention (post-Tailwind-v4):
     --primary: <color>;          /* not "222.2 47.4% 11.2%" HSL tuples */
     background: var(--primary);  /* used directly, no hsl() wrapper */

   If you need the legacy HSL-tuple format, write your own translation layer.

   Usage:
     import 'crusher-ui-kit/styles/shadcn-compat.css';
   Then any code that references --background, --foreground, --primary, etc.
   keeps working unchanged.
   ========================================================================== */

:root {
  /* Surfaces */
  --background:           var(--crusher-background-canvas);
  --foreground:           var(--crusher-text-primary);
  --card:                 var(--crusher-background-surface);
  --card-foreground:      var(--crusher-text-primary);
  --popover:              var(--crusher-background-surface);
  --popover-foreground:   var(--crusher-text-primary);

  /* Brand */
  --primary:              var(--crusher-color-brand-primary);
  --primary-foreground:   var(--crusher-color-base-white);

  /* Muted / Accent / Secondary (all use crusher's subtle-fill convention) */
  --secondary:            color-mix(in srgb, var(--crusher-text-primary) 6%, transparent);
  --secondary-foreground: var(--crusher-text-primary);
  --muted:                color-mix(in srgb, var(--crusher-text-primary) 5%, transparent);
  --muted-foreground:     var(--crusher-text-secondary);
  --accent:               color-mix(in srgb, var(--crusher-text-primary) 8%, transparent);
  --accent-foreground:    var(--crusher-text-primary);

  /* Destructive */
  --destructive:           var(--crusher-feedback-danger);
  --destructive-foreground: var(--crusher-color-base-white);

  /* Borders / Inputs / Focus ring */
  --border:               var(--crusher-border-primary);
  --input:                var(--crusher-border-primary);
  --ring:                 var(--crusher-color-brand-primary);

  /* Radius — shadcn's --radius is a single source-of-truth value that the
     component CSS derives sm/md/lg from. We mirror that contract. */
  --radius:               var(--crusher-component-radius);

  /* Chart palette — drawn from brand + accents so chart colors stay on-brand
     across dialect changes. */
  --chart-1: var(--crusher-color-brand-primary);
  --chart-2: var(--crusher-color-brand-secondary);
  --chart-3: var(--crusher-color-brand-accent-orange);
  --chart-4: var(--crusher-color-brand-accent-pink);
  --chart-5: var(--crusher-color-brand-accent-red);

  /* Sidebar (shadcn's sidebar block uses its own scoped tokens) */
  --sidebar:                 var(--crusher-nav-panel-bg, var(--crusher-background-surface));
  --sidebar-foreground:      var(--crusher-text-primary);
  --sidebar-primary:         var(--crusher-color-brand-primary);
  --sidebar-primary-foreground: var(--crusher-color-base-white);
  --sidebar-accent:          color-mix(in srgb, var(--crusher-text-primary) 6%, transparent);
  --sidebar-accent-foreground: var(--crusher-text-primary);
  --sidebar-border:          var(--crusher-border-primary);
  --sidebar-ring:            var(--crusher-color-brand-primary);
}