/* Nova IAM — Design Tokens
   All design variables centralized here.
   Colors + spacing + typography + radii + shadows + transitions.
   For branding/theming: adjust values here, touch nothing else. */

:root {
  /* Backgrounds */
  --bg-body:      #f0f2f5;
  --bg-card:      #ffffff;
  --bg-modal:     #ffffff;
  --bg-input:     #ffffff;
  --bg-header:    #1a1a2e;
  --bg-subtle:    #f8fafc;   /* slate-50 — single subtle surface */
  --bg-subtle2:   var(--bg-subtle);

  /* Text */
  --text-primary:    #1a1a2e;
  --text-secondary:  #334155;   /* slate-700 */
  --text-muted:      #64748b;   /* slate-500 */
  --text-label:      var(--text-muted);
  --text-faint:      #94a3b8;   /* slate-400 */
  --text-on-accent:  #ffffff;

  /* Borders */
  --border-color:   #e2e8f0;   /* slate-200 — single neutral border */
  --border-input:   #cbd5e1;   /* slate-300 */
  --border-subtle:  #f1f5f9;   /* slate-100 hairline */
  --border-card:    var(--border-color);

  /* Accent */
  --accent:         #7c83ff;
  --accent-hover:   #6366f1;
  --accent-subtle:  #f5f5ff;

  /* Status */
  --status-success:       #10b981;
  --status-success-hover: #059669;
  --status-error:         #ef4444;
  --status-error-hover:   #dc2626;
  --status-warning:       #f59e0b;
  --status-warning-hover: #d97706;
  --status-info:          #3b82f6;

  /* Semantic — two-tone violet: --color-indirect (dark) + --color-workflow (light).
     --color-published and --color-system-ldap alias these (no separate hues). */
  --color-focus:    #818cf8;
  --color-indirect: #7c3aed;
  --color-workflow: #8b5cf6;
  --color-entra:    #0078d4;            /* Microsoft Entra brand blue — vendor exception, intentionally near SAP */
  --color-scim:     #06b6d4;
  --overlay-bg:     rgba(0, 0, 0, 0.4);

  /* Status — darker text variants (for tinted badge text on light bg) */
  --status-error-text:    #b91c1c;
  --status-error-deep:    #7f1d1d;
  --status-warning-text:  #b45309;
  --status-info-text:     #1d4ed8;

  /* Event type colors */
  --color-event-business-role: #ec4899;
  --color-event-system:        #14b8a6;
  --color-event-sync:          #f97316;
  --color-event-org:           #65a30d;
  --color-event-org-bg:        #84cc16;

  /* System type colors */
  --color-system-sap:   #0070f2;                 /* SAP brand blue — vendor exception, intentionally near Entra */
  --color-system-ldap:  var(--color-workflow);   /* dedup: was identical to --color-workflow */

  /* Logo animation */
  --logo-color-1: #7c83ff;
  --logo-color-2: #a78bfa;
  --logo-color-3: #34d399;
  --logo-color-4: #60a5fa;

  /* KPI gradient endpoints (start uses status vars) */
  --kpi-users-end:    #a78bfa;
  --kpi-requests-end: #fbbf24;
  --kpi-risk-end:     #f87171;
  --kpi-systems-end:  #34d399;
  --kpi-joiner-end:   #34d399;
  --kpi-mover-end:    #60a5fa;
  --kpi-leaver-end:   #f87171;

  /* Skeleton / loading */
  --skeleton-base:   #f1f5f9;
  --skeleton-shine:  #e2e8f0;
  --bg-traceback:    #1e293b;
  --text-traceback:  #e2e8f0;
  --bg-code:         #f8fafc;

  /* Avatar palette (10 deterministic colors) */
  --avatar-1:  #6366f1;
  --avatar-2:  #ec4899;
  --avatar-3:  #f59e0b;
  --avatar-4:  #10b981;
  --avatar-5:  #ef4444;
  --avatar-6:  #3b82f6;
  --avatar-7:  #8b5cf6;
  --avatar-8:  #14b8a6;
  --avatar-9:  #f97316;
  --avatar-10: #64748b;

  /* Misc */
  --color-published: var(--color-indirect);  /* dedup: was identical to --color-indirect */

  /* Aliases */
  --danger:         var(--status-error);
  --danger-hover:   var(--status-error-hover);
}

[data-theme="dark"] {
  /* Backgrounds */
  --bg-body:      #0f0f1a;
  --bg-card:      #1a1a2e;
  --bg-modal:     #1e1e32;
  --bg-input:     #13131f;
  --bg-header:    #0f0f1a;
  --bg-subtle:    #1e1e30;
  --bg-subtle2:   #181828;

  /* Text */
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-label:     #cbd5e1;
  --text-faint:     #6b7280;  /* fix: war #475569 — zu wenig Kontrast */
  /* --text-on-accent bleibt #ffffff */

  /* Borders */
  --border-color:   #2d2d4a;
  --border-input:   #3d3d5c;
  --border-subtle:  #2d2d4a;
  --border-card:    #2d2d4a;

  /* Accent */
  --accent-subtle:  #25254a;  /* fix: war #1a1a35 — kaum von bg-card unterscheidbar */

  /* Semantic — lighten violets & cyan for legibility on dark surfaces */
  --color-workflow: #a78bfa;
  --color-indirect: #8b5cf6;
  --color-scim:     #22d3ee;

  /* Status — darker text variants (lighter in dark mode for readability) */
  --status-error-text:    #fca5a5;
  --status-error-deep:    #f87171;
  --status-warning-text:  #fcd34d;
  --status-info-text:     #93c5fd;

  /* Event type colors (slightly brighter in dark mode) */
  --color-event-business-role: #f472b6;
  --color-event-system:        #2dd4bf;
  --color-event-sync:          #fb923c;
  --color-event-org:           #a3e635;
  --color-event-org-bg:        #84cc16;

  /* Skeleton / loading */
  --skeleton-base:   #1e1e30;
  --skeleton-shine:  #2d2d4a;
  --bg-traceback:    #0f0f1a;
  --text-traceback:  #e2e8f0;
  --bg-code:         #13131f;

  /* Utility */
  --overlay-bg:     rgba(0, 0, 0, 0.6);
}

/* ─── Design Tokens (theme-independent) ────────────────────────────────────
   These never change between light and dark mode.
   Reference them everywhere instead of hardcoded values.              ──── */

:root {
  /* Spacing scale */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */

  /* Typography — families */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;

  /* Typography — sizes */
  --text-2xs:  0.62rem;    /* extra-small — avatar initials, micro labels */
  --text-xs:   0.72rem;    /* captions, table headers */
  --text-sm:   0.82rem;    /* secondary content, descriptions */
  --text-base: 0.875rem;   /* body text */
  --text-md:   0.95rem;    /* slightly prominent body */
  --text-lg:   1.1rem;     /* modal / panel headings */
  --text-xl:   1.3rem;     /* section headings */

  /* Typography — weights */
  --font-light:    300;   /* thin weight — table/body text */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Typography — misc */
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --tracking-wide:  0.04em;   /* uppercase labels */

  /* Border radius */
  --radius-sm:   4px;      /* tight chips, checkboxes */
  --radius-md:   6px;      /* tags, small badges */
  --radius-lg:   8px;      /* inputs, buttons */
  --radius-xl:   12px;     /* cards */
  --radius-2xl:  16px;     /* modals, large cards */
  --radius-full: 9999px;   /* pills */

  /* Shadows */
  --shadow-xs:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:    0 8px 30px rgba(0,0,0,0.15);
  --shadow-xl:    0 20px 60px rgba(0,0,0,0.15);
  --shadow-focus: 0 0 0 2px color-mix(in srgb, var(--color-focus) 12%, transparent);

  /* Transitions */
  --transition-fast: 0.1s;
  --transition-base: 0.15s;
  --transition-slow: 0.2s;

  /* Z-index layers */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    10000;
  --z-toast:    10001;
  /* Popovers that need to render above any modal in the stack (e.g. the
     user-detail popover triggered from inside the request-detail modal). */
  --z-popover-modal: 10100;
}