/**
 * @file
 * Component-specific tokens that derive from semantic tokens.
 * These tokens allow components to have aliases while staying connected
 * to the global theme system.
 */

@layer components {
  .dialog-off-canvas-main-canvas {
    /* Badge tokens - use semantic tokens from tokens.css */
    --sse-badge-bg: var(--color-surface);
    --sse-badge-fg: var(--color-fg);
    --sse-badge-success-bg: var(--color-success-bg);
    --sse-badge-success-fg: var(--color-success-fg);
    --sse-badge-info-bg: var(--color-info-bg);
    --sse-badge-info-fg: var(--color-info-fg);
    --sse-badge-warning-bg: var(--color-warning-bg);
    --sse-badge-warning-fg: var(--color-warning-fg);
    --sse-badge-danger-bg: var(--color-danger-bg);
    --sse-badge-danger-fg: var(--color-danger-fg);
    --sse-badge-action-bg: var(--color-link);
    --sse-badge-action-fg: var(--color-bg);

    /* Card tokens - use semantic tokens */
    --sse-card-border: var(--color-border);
    --sse-card-bg: var(--color-surface);
    --sse-card-fg: var(--color-fg);
  }
}