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

export const shxBaseStyles = css`
  :host {
    --shx-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
    --shx-bg-2: ${cssManager.bdTheme('#f4f4f5', '#111111')};
    --shx-card: ${cssManager.bdTheme('#ffffff', '#121212')};
    --shx-card-2: ${cssManager.bdTheme('#f8fafc', '#161616')};
    --shx-fg: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
    --shx-fg-2: ${cssManager.bdTheme('#3f3f46', '#d4d4d8')};
    --shx-fg-3: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
    --shx-fg-4: ${cssManager.bdTheme('#a1a1aa', '#525252')};
    --shx-border: ${cssManager.bdTheme('#e4e4e7', '#262626')};
    --shx-border-soft: ${cssManager.bdTheme('#f1f5f9', '#1c1c1c')};
    --shx-accent: ${cssManager.bdTheme('#0050b9', '#3b82f6')};
    --shx-accent-2: ${cssManager.bdTheme('#6e5be6', '#a78bfa')};
    --shx-accent-soft: ${cssManager.bdTheme('#e6effb', 'rgba(59,130,246,0.15)')};
    --shx-green: ${cssManager.bdTheme('#16a34a', '#4ade80')};
    --shx-amber: ${cssManager.bdTheme('#b45309', '#fbbf24')};
    --shx-red: ${cssManager.bdTheme('#dc2626', '#f87171')};
    --shx-radius: 10px;
    --shx-font: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --shx-display: 'Plus Jakarta Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
    --shx-mono: 'Intel One Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--shx-fg);
    font-family: var(--shx-font);
    font-feature-settings: 'cv11', 'tnum', 'cv05';
    -webkit-font-smoothing: antialiased;
  }

  :host([theme="dark"]),
  :host([dark]) {
    --shx-bg: #0a0a0a;
    --shx-bg-2: #111111;
    --shx-card: #121212;
    --shx-card-2: #161616;
    --shx-fg: #fafafa;
    --shx-fg-2: #d4d4d8;
    --shx-fg-3: #a1a1aa;
    --shx-fg-4: #525252;
    --shx-border: #262626;
    --shx-border-soft: #1c1c1c;
    --shx-accent: #3b82f6;
    --shx-accent-2: #a78bfa;
    --shx-accent-soft: rgba(59,130,246,0.15);
    --shx-green: #4ade80;
    --shx-amber: #fbbf24;
    --shx-red: #f87171;
  }

  * {
    box-sizing: border-box;
  }
`;

export const shxElementStyles = [cssManager.defaultStyles, shxBaseStyles];