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

/**
 * CSS custom properties (variables) for the design system
 * Using --dees-* prefix for consistency with dees-catalog
 */
export const cssVariables = css`
  :root {
    /* Primary colors */
    --dees-primary: #3b82f6;
    --dees-primary-dark: #2563eb;
    --dees-primary-foreground: #ffffff;

    /* Secondary colors */
    --dees-secondary: #f4f4f5;
    --dees-secondary-foreground: #18181b;
    --dees-secondary-dark: #e4e4e7;

    /* Background */
    --dees-background: #ffffff;
    --dees-card: #ffffff;
    --dees-surface: #f4f4f5;

    /* Text */
    --dees-foreground: #09090b;
    --dees-muted-foreground: #71717a;

    /* Borders */
    --dees-border: #e4e4e7;
    --dees-input: #e4e4e7;
    --dees-ring: #3b82f6;

    /* Semantic colors */
    --dees-success: #22c55e;
    --dees-warning: #f59e0b;
    --dees-danger: #ef4444;
    --dees-danger-dark: #dc2626;
    --dees-destructive: #dc2626;
    --dees-destructive-foreground: #ffffff;

    /* Accent */
    --dees-accent: #f4f4f5;
    --dees-accent-foreground: #18181b;

    /* Muted */
    --dees-muted: #f4f4f5;

    /* Border radius */
    --dees-radius: 0.5rem;
    --dees-radius-sm: 0.25rem;
    --dees-radius-md: 0.375rem;
    --dees-radius-lg: 0.75rem;
    --dees-radius-xl: 1rem;
    --dees-radius-full: 9999px;

    /* Shadows */
    --dees-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dees-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dees-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Transitions */
    --dees-transition-fast: 150ms ease;
    --dees-transition-normal: 300ms ease;
    --dees-transition-slow: 500ms ease;
    --dees-spring: cubic-bezier(0.4, 0, 0.2, 1);
    --dees-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --dees-ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* Spacing */
    --dees-space-xs: 0.25rem;
    --dees-space-sm: 0.5rem;
    --dees-space-md: 1rem;
    --dees-space-lg: 1.5rem;
    --dees-space-xl: 2rem;

    /* Mobile-specific */
    --dees-safe-area-inset-top: env(safe-area-inset-top, 0px);
    --dees-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --dees-safe-area-inset-left: env(safe-area-inset-left, 0px);
    --dees-safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);

    /* Page padding */
    --dees-padding-page: 1rem;

    /* Z-index scale */
    --dees-z-base: 0;
    --dees-z-dropdown: 100;
    --dees-z-sticky: 200;
    --dees-z-fixed: 300;
    --dees-z-overlay: 400;
    --dees-z-modal: 500;
    --dees-z-popover: 600;
    --dees-z-toast: 700;
    --dees-z-tooltip: 800;
    --dees-z-notification: 900;
    --dees-z-max: 9999;
  }

  /* Dark theme */
  :root[data-theme="dark"] {
    /* Primary colors (same) */
    --dees-primary: #3b82f6;
    --dees-primary-dark: #2563eb;
    --dees-primary-foreground: #ffffff;

    /* Secondary colors */
    --dees-secondary: #27272a;
    --dees-secondary-foreground: #fafafa;
    --dees-secondary-dark: #18181b;

    /* Background */
    --dees-background: #09090b;
    --dees-card: #18181b;
    --dees-surface: #27272a;

    /* Text */
    --dees-foreground: #fafafa;
    --dees-muted-foreground: #a1a1aa;

    /* Borders */
    --dees-border: #27272a;
    --dees-input: #27272a;
    --dees-ring: #3b82f6;

    /* Accent */
    --dees-accent: #27272a;
    --dees-accent-foreground: #fafafa;

    /* Muted */
    --dees-muted: #27272a;
  }
`;

/**
 * Inject CSS variables into the document
 * Call this once at app initialization
 */
export function injectCssVariables(): void {
  if (typeof document === 'undefined') return;

  const styleId = 'dees-mobile-variables';
  if (document.getElementById(styleId)) return;

  const style = document.createElement('style');
  style.id = styleId;
  style.textContent = cssVariables.cssText;
  document.head.appendChild(style);
}