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

export const idpAccent = '#3B82F6';

export const idpTheme = {
  bg: 'var(--idp-bg)',
  fg: 'var(--idp-fg)',
  muted: 'var(--idp-muted)',
  mutedFg: 'var(--idp-muted-fg)',
  border: 'var(--idp-border)',
  card: 'var(--idp-card)',
  primary: 'var(--idp-primary)',
  primaryFg: 'var(--idp-primary-fg)',
    accent: 'var(--idp-accent)',
    accentHover: 'var(--idp-accent-hover)',
    accentSoft: 'var(--idp-accent-soft)',
    info: 'var(--idp-info)',
    destructive: 'var(--idp-destructive)',
  ok: 'var(--idp-ok)',
  warn: 'var(--idp-warn)',
  radius: 'var(--idp-radius)',
};

export const idpBaseStyles = css`
  :host {
    --idp-bg: #fafaf9;
    --idp-bg-2: #f4f4f2;
    --idp-fg: #0a0a0a;
    --idp-fg-2: #3f3f46;
    --idp-fg-3: #52525b;
    --idp-muted: #f1f1ef;
    --idp-muted-fg: #71717a;
    --idp-border: #e4e4e7;
    --idp-border-soft: #ededec;
    --idp-border-strong: #d4d4d8;
    --idp-card: #ffffff;
    --idp-card-2: #f8f8f7;
    --idp-primary: #18181b;
    --idp-primary-fg: #fafafa;
    --idp-accent: #0050b9;
    --idp-accent-hover: #0069f2;
    --idp-accent-fg: #ffffff;
    --idp-accent-soft: #e6effb;
    --idp-destructive: #ef4444;
    --idp-ok: #16a34a;
    --idp-ok-bg: #f0fdf4;
    --idp-ok-border: #bbf7d0;
    --idp-warn: #b45309;
    --idp-warn-bg: #fef9c3;
    --idp-warn-border: #fde68a;
    --idp-error: #dc2626;
    --idp-error-bg: #fef2f2;
    --idp-error-border: #fecaca;
    --idp-info: #1e40af;
    --idp-info-bg: #eff6ff;
    --idp-info-border: #bfdbfe;
    --idp-chart-1: #0050b9;
    --idp-chart-2: #16a34a;
    --idp-chart-3: #dc2626;
    --idp-chart-4: #b45309;
    --idp-chart-5: #6e5be6;
    --idp-spark-up: #16a34a;
    --idp-spark-down: #dc2626;
    --idp-spark-info: #0050b9;
    --idp-radius: 8px;
    --idp-radius-lg: 12px;
    --idp-font: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --idp-display: 'Plus Jakarta Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
    --idp-mono: 'Intel One Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --idp-serif: 'Instrument Serif', Georgia, serif;
    font-family: var(--idp-font);
    font-feature-settings: "cv11", "ss03";
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
  }

  :host([theme="dark"]),
  :host([dark]) {
    --idp-bg: #0a0a0a;
    --idp-bg-2: #111111;
    --idp-fg: #fafafa;
    --idp-fg-2: #d4d4d8;
    --idp-fg-3: hsl(0 0% 70%);
    --idp-muted: #161616;
    --idp-muted-fg: hsl(0 0% 55%);
    --idp-border: #262626;
    --idp-border-soft: #1c1c1c;
    --idp-border-strong: #333333;
    --idp-card: #121212;
    --idp-card-2: #161616;
    --idp-primary: #fafafa;
    --idp-primary-fg: #18181b;
    --idp-accent: #3b82f6;
    --idp-accent-hover: #60a5fa;
    --idp-accent-soft: rgba(59, 130, 246, 0.15);
    --idp-destructive: #ef4444;
    --idp-ok: #4ade80;
    --idp-ok-bg: rgba(20, 83, 45, 0.4);
    --idp-ok-border: rgba(74, 222, 128, 0.25);
    --idp-warn: #fbbf24;
    --idp-warn-bg: rgba(69, 26, 3, 0.6);
    --idp-warn-border: rgba(251, 191, 36, 0.25);
    --idp-error: #f87171;
    --idp-error-bg: rgba(69, 10, 10, 0.6);
    --idp-error-border: rgba(248, 113, 113, 0.25);
    --idp-info: #93bbfd;
    --idp-info-bg: rgba(59, 130, 246, 0.15);
    --idp-info-border: rgba(59, 130, 246, 0.3);
    --idp-chart-1: #3b82f6;
    --idp-chart-2: #4ade80;
    --idp-chart-3: #f87171;
    --idp-chart-4: #fbbf24;
    --idp-chart-5: #a78bfa;
    --idp-spark-up: #4ade80;
    --idp-spark-down: #f87171;
    --idp-spark-info: #93bbfd;
  }
`;

export const idpElementStyles = [cssManager.defaultStyles, idpBaseStyles];