/**
 * ngx-core-components — Design Token System
 * 
 * This file declares all CSS custom properties used across the library.
 * Override these properties globally or scope them to specific selectors.
 */

:root {
  /* ── 1. Global Brand & Semantic Colors ── */
  --ngx-color-primary: #4f46e5;
  --ngx-color-primary-hover: #4338ca;
  --ngx-color-primary-light: #e0e7ff;
  --ngx-color-secondary: #64748b;
  --ngx-color-success: #10b981;
  --ngx-color-warning: #f59e0b;
  --ngx-color-danger: #ef4444;
  --ngx-color-info: #06b6d4;

  /* ── 2. Surface & Text Colors ── */
  --ngx-color-surface: #ffffff;
  --ngx-color-surface-alt: #f8fafc;
  --ngx-color-surface-overlay: rgba(15, 23, 42, 0.05);
  --ngx-color-border: #e2e8f0;
  --ngx-color-text: #0f172a;
  --ngx-color-text-secondary: #64748b;
  --ngx-color-text-disabled: #94a3b8;
  --ngx-color-text-inverse: #ffffff;

  /* ── 3. Spacing Scale ── */
  --ngx-space-xs: 0.25rem;
  --ngx-space-sm: 0.5rem;
  --ngx-space-md: 0.75rem;
  --ngx-space-lg: 1rem;
  --ngx-space-xl: 1.5rem;
  --ngx-space-2xl: 2rem;

  /* ── 4. Typography ── */
  --ngx-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ngx-font-size-xs: 0.75rem;
  --ngx-font-size-sm: 0.875rem;
  --ngx-font-size-md: 1rem;
  --ngx-font-size-lg: 1.125rem;
  --ngx-font-size-xl: 1.25rem;
  --ngx-font-weight-normal: 400;
  --ngx-font-weight-medium: 500;
  --ngx-font-weight-bold: 600;
  --ngx-line-height-tight: 1.25;
  --ngx-line-height-normal: 1.5;
  --ngx-line-height-relaxed: 1.625;

  /* ── 5. Borders & Radius ── */
  --ngx-radius-sm: 0.125rem;
  --ngx-radius-md: 0.25rem;
  --ngx-radius-lg: 0.375rem;
  --ngx-radius-xl: 0.5rem;
  --ngx-radius-full: 9999px;
  --ngx-border-width: 1px;
  --ngx-border-color: var(--ngx-color-border);

  /* ── 6. Shadows ── */
  --ngx-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ngx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ngx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ngx-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ── 7. Transitions ── */
  --ngx-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ngx-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ngx-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── 8. Focus Rings ── */
  --ngx-focus-ring-color: var(--ngx-color-primary-light);
  --ngx-focus-ring-width: 3px;
  --ngx-focus-ring-offset: 1px;

  /* ── 9. Component Specific Base Tokens ── */
  --ngx-input-border: var(--ngx-color-border);
  --ngx-input-bg: var(--ngx-color-surface);
  --ngx-input-focus: var(--ngx-color-primary);
  --ngx-input-radius: var(--ngx-radius-lg);
  --ngx-input-height: 2.5rem;

  --ngx-grid-border: var(--ngx-color-border);
  --ngx-grid-header-bg: var(--ngx-color-surface-alt);
  --ngx-grid-row-hover: var(--ngx-color-surface-alt);
  --ngx-grid-stripe: rgba(15, 23, 42, 0.02);

  --ngx-btn-padding: 0.5rem 1rem;
  --ngx-btn-radius: var(--ngx-radius-lg);
  --ngx-btn-font-weight: var(--ngx-font-weight-medium);

  --ngx-dialog-overlay-bg: rgba(15, 23, 42, 0.4);
  --ngx-dialog-radius: var(--ngx-radius-xl);
  --ngx-dialog-shadow: var(--ngx-shadow-xl);

  /* ── 10. Legacy Mapped / Compatibility Variables ── */
  --primary-color: var(--ngx-color-primary);
  --primary-hover: var(--ngx-color-primary-hover);
  --secondary-color: var(--ngx-color-success);

  --ngx-chart-text: var(--ngx-color-text);
  --ngx-chart-axis-text: var(--ngx-color-text-secondary);
  --ngx-chart-bg: var(--ngx-color-surface);
  --ngx-chart-grid: #ebedf0;
  --ngx-chart-axis: #ced4da;

  --ngx-chart-tooltip-bg: rgba(15, 23, 42, 0.92);
  --ngx-chart-tooltip-color: #f8fafc;
}

/* ── Dark Mode Presets ── */
body.dark, [data-theme="dark"] {
  --ngx-color-surface: #0f172a;
  --ngx-color-surface-alt: #1e293b;
  --ngx-color-surface-overlay: rgba(255, 255, 255, 0.05);
  --ngx-color-border: #334155;
  --ngx-color-text: #f8fafc;
  --ngx-color-text-secondary: #94a3b8;
  --ngx-color-text-disabled: #64748b;
  --ngx-color-text-inverse: #0f172a;

  --ngx-chart-grid: rgba(255, 255, 255, 0.08);
  --ngx-chart-axis: rgba(255, 255, 255, 0.15);

  --ngx-dialog-overlay-bg: rgba(0, 0, 0, 0.6);
}

/* ── 11. Accessibility Enhancements ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  :root {
    --ngx-color-primary: SelectedText;
    --ngx-color-primary-hover: SelectedText;
    --ngx-color-border: CanvasText;
    --ngx-focus-ring-color: Highlight;
  }
}