/* ═══════════════════════════════════════════════════════════════
   EOS Design System Tokens
   Source: FSD-UI-Dashboard-DesignSystem.md
   60+ CSS custom properties for theming, spacing, elevation
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Font Stacks ── */
  --eos-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --eos-font-mono: "Cascadia Code", "Fira Code", SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* ── Typography Scale ── */
  --eos-font-size-h1: 2.25rem;
  --eos-font-size-h2: 1.875rem;
  --eos-font-size-h3: 1.5rem;
  --eos-font-size-h4: 1.25rem;
  --eos-font-size-h5: 1.0625rem;
  --eos-font-size-h6: 0.9375rem;
  --eos-font-size-lg: 1.0625rem;
  --eos-font-size-base: 0.875rem;
  --eos-font-size-sm: 0.8125rem;
  --eos-font-size-xs: 0.75rem;
  --eos-font-size-mono: 0.8125rem;

  --eos-font-weight-regular: 400;
  --eos-font-weight-medium: 500;
  --eos-font-weight-semibold: 600;
  --eos-font-weight-bold: 700;

  --eos-line-height-tight: 1.2;
  --eos-line-height-snug: 1.3;
  --eos-line-height-normal: 1.5;
  --eos-line-height-relaxed: 1.6;

  /* ── Surface Colours (Light) ── */
  --eos-surface-page:       #f5f5f9;
  --eos-surface-card:       #ffffff;
  --eos-surface-sidebar:    #0c223f;
  --eos-surface-header:     #ffffff;
  --eos-surface-overlay:    rgba(0, 0, 0, 0.5);
  --eos-surface-hover:      #f0f2f8;
  --eos-surface-selected:   #e7e9f3;
  --eos-surface-input:      #ffffff;
  --eos-surface-disabled:   #f5f5f5;

  /* ── Text Hierarchy (Light) ── */
  --eos-text-primary:       #2b2c40;
  --eos-text-secondary:     #6d6b81;
  --eos-text-tertiary:      #a5a3ae;
  --eos-text-disabled:      #c7c5d0;
  --eos-text-inverse:       #ffffff;
  --eos-text-link:          #5a6acf;
  --eos-text-sidebar:       #c5cbe0;
  --eos-text-sidebar-active:#ffffff;

  /* ── Border Colours (Light) ── */
  --eos-border-default:     #dbdade;
  --eos-border-strong:      #b4b2bd;
  --eos-border-subtle:      #eeedf0;
  --eos-border-focus:       #5a6acf;

  /* ── Interactive / Semantic (Light) ── */
  --eos-primary:            #5a6acf;
  --eos-primary-hover:      #4a59b8;
  --eos-primary-active:     #3f4ea3;
  --eos-primary-light:      #e7e8f5;

  --eos-secondary:          #8592a3;
  --eos-secondary-hover:    #73808f;
  --eos-secondary-active:   #65717e;
  --eos-secondary-light:    #ebeef0;

  --eos-success:            #28a745;
  --eos-success-hover:      #218838;
  --eos-success-light:      #d4edda;

  --eos-danger:             #dc3545;
  --eos-danger-hover:       #c82333;
  --eos-danger-light:       #f8d7da;

  --eos-warning:            #ff9f43;
  --eos-warning-hover:      #e68a30;
  --eos-warning-light:      #fff3cd;

  --eos-info:               #17a2b8;
  --eos-info-hover:         #138496;
  --eos-info-light:         #d1ecf1;

  /* ── Brand Navy ── */
  --eos-navy:               #0c223f;
  --eos-navy-light:         #1a3456;
  --eos-navy-lighter:       #2a4a6e;

  /* ── Status Indicators ── */
  --eos-status-active:      #28a745;
  --eos-status-pending:     #ff9f43;
  --eos-status-processing:  #17a2b8;
  --eos-status-failed:      #dc3545;
  --eos-status-cancelled:   #6c757d;
  --eos-status-warning:     #e65100;
  --eos-status-reversed:    #6f42c1;
  --eos-status-suspended:   #fd7e14;
  --eos-status-draft:       #adb5bd;
  --eos-status-escalated:   #d63384;
  --eos-status-completed:   #16a34a;
  --eos-status-terminated:  #991b1b;
  --eos-status-disputed:    #7c3aed;
  --eos-status-expired:     #78716c;
  --eos-status-text-on-filled: #ffffff;

  /* ── Spacing Scale (base 4px) ── */
  --eos-space-3xs: 0.125rem;
  --eos-space-2xs: 0.25rem;
  --eos-space-xs:  0.5rem;
  --eos-space-sm:  0.75rem;
  --eos-space-md:  1.0rem;
  --eos-space-lg:  1.5rem;
  --eos-space-xl:  2.0rem;
  --eos-space-2xl: 3.0rem;
  --eos-space-3xl: 4.0rem;

  /* ── Elevation / Shadows ── */
  --eos-shadow-none:     none;
  --eos-shadow-card:     0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --eos-shadow-dropdown: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  --eos-shadow-modal:    0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
  --eos-shadow-toast:    0 0.75rem 2rem rgba(0, 0, 0, 0.22);

  /* ── Border Radius ── */
  --eos-radius-none: 0;
  --eos-radius-sm:   0.25rem;
  --eos-radius-md:   0.375rem;
  --eos-radius-lg:   0.5rem;
  --eos-radius-full: 9999px;

  /* ── Border Width ── */
  --eos-border-width-thin:    1px;
  --eos-border-width-default: 1.5px;
  --eos-border-width-thick:   2px;

  /* ── Layout Dimensions ── */
  --eos-sidebar-width: 260px;
  --eos-sidebar-collapsed-width: 64px;
  --eos-sidebar-transition: width 200ms ease;
  --eos-header-height: 52px;

  /* ── KPI Card Icon Backgrounds ── */
  --eos-kpi-icon-bg-primary: rgba(105, 108, 255, 0.12);
  --eos-kpi-icon-bg-success: rgba(113, 221, 55, 0.12);
  --eos-kpi-icon-bg-danger:  rgba(255, 62, 29, 0.12);
  --eos-kpi-icon-bg-warning: rgba(255, 171, 0, 0.12);
  --eos-kpi-icon-bg-info:    rgba(3, 195, 236, 0.12);
  --eos-kpi-icon-size: 48px;
  --eos-kpi-icon-radius: 12px;

  /* ── Merchant Brand Override Layer ── */
  --brand-primary:       var(--eos-primary);
  --brand-primary-hover: var(--eos-primary-hover);
  --brand-primary-active:var(--eos-primary-active);
  --brand-primary-light: var(--eos-primary-light);
  --brand-sidebar-bg:    var(--eos-surface-sidebar);
  --brand-header-bg:     var(--eos-surface-header);
  --brand-accent:        var(--eos-info);
  --brand-logo-url:      none;
  --brand-logo-height:   2.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   Dark Theme Overrides
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* ── KPI Card Icon Backgrounds (dark) ── */
  --eos-kpi-icon-bg-primary: rgba(79, 195, 247, 0.12);
  --eos-kpi-icon-bg-success: rgba(76, 175, 80, 0.15);
  --eos-kpi-icon-bg-danger:  rgba(239, 83, 80, 0.15);
  --eos-kpi-icon-bg-warning: rgba(255, 167, 38, 0.15);
  --eos-kpi-icon-bg-info:    rgba(38, 198, 218, 0.12);

  /* ── Surfaces — blue-navy palette from mockup ── */
  --eos-surface-page:       #0f1724;
  --eos-surface-card:       #1a2332;
  --eos-surface-card-border:#1e2d3f;
  --eos-surface-sidebar:    #0b1221;
  --eos-surface-header:     #0b1221;
  --eos-surface-overlay:    rgba(0, 0, 0, 0.6);
  --eos-surface-hover:      #1e2d3f;
  --eos-surface-selected:   #243548;
  --eos-surface-input:      #1e2d3f;
  --eos-surface-disabled:   #1a2332;

  /* ── Text ── */
  --eos-text-primary:       #e8edf3;
  --eos-text-secondary:     #8899aa;
  --eos-text-tertiary:      #5a6b7d;
  --eos-text-disabled:      #3d4e5f;
  --eos-text-inverse:       #0f1724;
  --eos-text-link:          #4fc3f7;
  --eos-text-sidebar:       #6b7f94;
  --eos-text-sidebar-active:#ffffff;

  /* ── Borders ── */
  --eos-border-default:     #1e2d3f;
  --eos-border-strong:      #2a3d52;
  --eos-border-subtle:      #162231;
  --eos-border-focus:       #4fc3f7;

  /* ── Interactive / Semantic — cyan-blue primary ── */
  --eos-primary:            #4fc3f7;
  --eos-primary-hover:      #29b6f6;
  --eos-primary-active:     #039be5;
  --eos-primary-light:      rgba(79, 195, 247, 0.12);

  --eos-secondary:          #78909c;
  --eos-secondary-hover:    #90a4ae;
  --eos-secondary-active:   #607d8b;
  --eos-secondary-light:    rgba(120, 144, 156, 0.15);

  --eos-success:            #4caf50;
  --eos-success-hover:      #66bb6a;
  --eos-success-light:      rgba(76, 175, 80, 0.15);

  --eos-danger:             #ef5350;
  --eos-danger-hover:       #e53935;
  --eos-danger-light:       rgba(239, 83, 80, 0.15);

  --eos-warning:            #ffa726;
  --eos-warning-hover:      #ffb74d;
  --eos-warning-light:      rgba(255, 167, 38, 0.15);

  --eos-info:               #26c6da;
  --eos-info-hover:         #4dd0e1;
  --eos-info-light:         rgba(38, 198, 218, 0.12);

  --eos-purple:             #ab47bc;
  --eos-purple-light:       rgba(171, 71, 188, 0.15);

  /* ── Brand Navy (Dark) ── */
  --eos-navy:               #0b1221;
  --eos-navy-light:         #1a2332;
  --eos-navy-lighter:       #1e2d3f;

  /* ── Status Indicators (Dark) ── */
  --eos-status-active:      #4caf50;
  --eos-status-pending:     #ffa726;
  --eos-status-processing:  #26c6da;
  --eos-status-failed:      #ef5350;
  --eos-status-cancelled:   #78909c;
  --eos-status-warning:     #ff7043;
  --eos-status-reversed:    #ab47bc;
  --eos-status-suspended:   #ff7043;
  --eos-status-draft:       #90a4ae;
  --eos-status-escalated:   #ec407a;
  --eos-status-completed:   #4caf50;
  --eos-status-terminated:  #c62828;
  --eos-status-disputed:    #ab47bc;
  --eos-status-expired:     #78909c;
  --eos-status-text-on-filled: #0f1724;

  /* ── Elevation (Dark) ── */
  --eos-shadow-card:     0 2px 8px rgba(0, 0, 0, 0.4);
  --eos-shadow-dropdown: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
  --eos-shadow-modal:    0 0.5rem 1.5rem rgba(0, 0, 0, 0.6);
  --eos-shadow-toast:    0 0.75rem 2rem rgba(0, 0, 0, 0.65);
}