@import '@astryxdesign/core/astryx.css';
@import '@astryxdesign/lab/lab.css';

/* Global bridge: astryx CSS variables <- overdeck --mod-* tokens (both themes).
   Astryx consumes --color- and --radius- vars (asterisk wildcard omitted here:
   a literal "star-slash" inside this comment prematurely closes it and the
   remaining comment text parses as invalid CSS). Deck-wide mapping here lets
   every astryx component render with the overdeck palette. Theme-specific
   --mod-* are defined in theme.css, so just alias them per theme. */
:root,
:root[data-theme='dark'] {
  --color-background-body: var(--mod-color-bg);
  --color-background-surface: var(--mod-color-surface);
  --color-background-card: var(--mod-color-surface);
  --color-background-popover: var(--mod-color-surface-raised);
  --color-background-muted: var(--mod-color-surface-raised);
  --color-text-primary: var(--mod-color-fg);
  --color-text-secondary: var(--mod-color-fg-muted);
  --color-text-disabled: var(--mod-color-fg-subtle);
  --color-text-accent: var(--mod-color-accent);
  --color-border: var(--mod-color-border);
  --color-border-emphasized: var(--mod-color-border-strong);
  --color-accent: var(--mod-color-accent);
  --color-accent-muted: var(--mod-color-surface-raised);
  --color-on-accent: var(--mod-color-accent-fg);
  --color-success: var(--mod-color-success);
  --color-success-muted: var(--mod-color-surface-raised);
  --color-on-success: var(--mod-color-success-fg);
  --color-warning: var(--mod-color-warning);
  --color-warning-muted: var(--mod-color-surface-raised);
  --color-on-warning: var(--mod-color-warning-fg);
  --color-error: var(--mod-color-danger);
  --color-error-muted: var(--mod-color-surface-raised);
  --color-on-error: var(--mod-color-danger-fg);
  --color-icon-accent: var(--mod-color-accent);
  --color-icon-primary: var(--mod-color-fg);
  --color-icon-secondary: var(--mod-color-fg-muted);
  --color-icon-disabled: var(--mod-color-fg-subtle);
  --color-overlay: var(--mod-color-bg);
  --color-hover: var(--mod-color-surface-raised);
  --color-pressed: var(--mod-color-surface-raised);
  --color-syntax-background: var(--mod-color-surface-raised);
  --color-syntax-comment: var(--mod-color-fg-muted);
  --color-syntax-punctuation: var(--mod-color-fg-subtle);
  --color-syntax-variable: var(--mod-color-fg);
  --radius-inner: var(--mod-radius-sm);
  --radius-element: var(--mod-radius-md);
  --radius-container: var(--mod-radius-lg);
  --radius-full: var(--mod-radius-full);
}

:root[data-theme='light'] {
  --color-background-body: var(--mod-color-bg);
  --color-background-surface: var(--mod-color-surface);
  --color-background-card: var(--mod-color-surface);
  --color-background-popover: var(--mod-color-surface-raised);
  --color-background-muted: var(--mod-color-surface-raised);
  --color-text-primary: var(--mod-color-fg);
  --color-text-secondary: var(--mod-color-fg-muted);
  --color-text-disabled: var(--mod-color-fg-subtle);
  --color-text-accent: var(--mod-color-accent);
  --color-border: var(--mod-color-border);
  --color-border-emphasized: var(--mod-color-border-strong);
  --color-accent: var(--mod-color-accent);
  --color-accent-muted: var(--mod-color-surface-raised);
  --color-on-accent: var(--mod-color-accent-fg);
  --color-success: var(--mod-color-success);
  --color-success-muted: var(--mod-color-surface-raised);
  --color-on-success: var(--mod-color-success-fg);
  --color-warning: var(--mod-color-warning);
  --color-warning-muted: var(--mod-color-surface-raised);
  --color-on-warning: var(--mod-color-warning-fg);
  --color-error: var(--mod-color-danger);
  --color-error-muted: var(--mod-color-surface-raised);
  --color-on-error: var(--mod-color-danger-fg);
  --color-icon-accent: var(--mod-color-accent);
  --color-icon-primary: var(--mod-color-fg);
  --color-icon-secondary: var(--mod-color-fg-muted);
  --color-icon-disabled: var(--mod-color-fg-subtle);
  --color-overlay: var(--mod-color-bg);
  --color-hover: var(--mod-color-surface-raised);
  --color-pressed: var(--mod-color-surface-raised);
  --color-syntax-background: var(--mod-color-surface-raised);
  --color-syntax-comment: var(--mod-color-fg-muted);
  --color-syntax-punctuation: var(--mod-color-fg-subtle);
  --color-syntax-variable: var(--mod-color-fg);
  --radius-inner: var(--mod-radius-sm);
  --radius-element: var(--mod-radius-md);
  --radius-container: var(--mod-radius-lg);
  --radius-full: var(--mod-radius-full);
}