import { css } from '@design.estate/dees-element';

/**
 * CSS custom properties (design tokens) for tsview components
 * Add themeStyles to your component's static styles array to use these variables
 */
export const themeStyles = css`
  :host {
    /* Background colors */
    --tsview-bg-primary: #1a1a1a;
    --tsview-bg-secondary: #1e1e1e;
    --tsview-bg-tertiary: #141414;
    --tsview-bg-overlay: rgba(0, 0, 0, 0.2);
    --tsview-bg-overlay-dark: rgba(0, 0, 0, 0.3);
    --tsview-bg-dialog-overlay: rgba(0, 0, 0, 0.7);

    /* Border colors */
    --tsview-border-primary: #333;
    --tsview-border-secondary: #444;
    --tsview-border-tertiary: #2a2a3e;

    /* Text colors */
    --tsview-text-primary: #fff;
    --tsview-text-secondary: #e0e0e0;
    --tsview-text-tertiary: #ccc;
    --tsview-text-muted: #888;
    --tsview-text-dim: #666;

    /* Interactive states */
    --tsview-hover-bg: rgba(255, 255, 255, 0.05);
    --tsview-hover-bg-strong: rgba(255, 255, 255, 0.1);
    --tsview-selected-bg: rgba(255, 255, 255, 0.08);
    --tsview-active-bg: rgba(255, 255, 255, 0.1);

    /* Accent colors */
    --tsview-accent-folder: #fbbf24;

    /* Danger/destructive actions */
    --tsview-danger: #ef4444;
    --tsview-danger-text: #f87171;
    --tsview-danger-bg: rgba(239, 68, 68, 0.2);
    --tsview-danger-bg-hover: rgba(239, 68, 68, 0.3);

    /* Success states */
    --tsview-success: #22c55e;
    --tsview-success-bg: rgba(34, 197, 94, 0.2);

    /* Border radius */
    --tsview-radius-sm: 4px;
    --tsview-radius-md: 6px;
    --tsview-radius-lg: 8px;
    --tsview-radius-xl: 12px;

    /* Spacing */
    --tsview-spacing-xs: 4px;
    --tsview-spacing-sm: 8px;
    --tsview-spacing-md: 12px;
    --tsview-spacing-lg: 16px;
    --tsview-spacing-xl: 24px;
  }
`;