/**
 * entriso Plugin UI Design System — Tokens (tokens.css)
 * Section 1 of ENTRISO-PLUGIN-UI-COMPONENTS.md
 * Canonical source for all CSS custom properties and color variables.
 */

:root,
.entriso-wrap {
  /* Brand */
  --color-primary:        #695ced;  /* every interactive element */
  --color-primary-hover:  #5a4dd0;
  --color-primary-active: #4c1d95;
  --color-primary-light:  #8b80f1;
  --color-primary-soft:   #f0ecff;  /* active nav pill, selected row, tag bg */
  --color-primary-soft-2: #f4f0ff;  /* active selector tile bg */
  --color-primary-border: #c4b5fd;
  --color-brand-dark:     #282249;  /* granat: all headings, brand name */

  /* Neutrals */
  --color-canvas:         #f4f5f8;  /* page background behind cards */
  --color-surface:        #ffffff;  /* cards, tables, inputs */
  --color-surface-sunken: #f8fafc;  /* table head, accordion head, empty state */
  --color-border:         #e2e4e9;  /* every 1px border */
  --color-border-strong:  #cbd5e1;  /* checkbox border, dashed borders */
  --color-divider:        #f1f5f9;  /* inside-card hairlines, table row borders */
  --color-text:           #1e1b4b;  /* primary text */
  --color-text-body:      #334155;  /* table cells, body copy */
  --color-muted:          #64748b;  /* labels, captions, icons */
  --color-disabled:       #94a3b8;

  /* Semantic */
  --color-success:        #166534;
  --color-success-bg:     #f0fdf4;
  --color-success-border: #bbf7d0;

  --color-danger:         #e11d48;
  --color-danger-bg:      #fff1f2;
  --color-danger-border:  #fecdd3;

  --color-warning:        #c2410c;
  --color-warning-bg:     #fff8f0;
  --color-warning-border: #fed7aa;

  --color-info:           #0284c7;
  --color-info-bg:        #f0f9ff;
  --color-info-border:    #bae6fd;

  /* Accent — restricted: charts 2nd series & KPI dots ONLY. Never on a control */
  --color-accent:         #fe2b78;

  /* Typography */
  --font-sans: 'Geist', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Radius */
  --radius-xs:   4px;   /* mono ID pills, micro badges */
  --radius-md:   8px;   /* buttons, inputs, icon buttons, tooltips, nav pills */
  --radius-lg:   12px;  /* cards, selector tiles, accordions, KPI cards */
  --radius-xl:   16px;  /* modals, rule cards */
  --radius-full: 9999px;/* status badges, weekday pills, filter tags, toggles */

  /* Elevation */
  --shadow-2xs:    0 1px 2px 0 rgba(0,0,0,0.03);
  --shadow-card:   0 1px 3px 0 rgba(0,0,0,0.04), 0 1px 2px 0 rgba(0,0,0,0.02);
  --shadow-hover:  0 4px 12px 0 rgba(105,92,237,0.08);
  --shadow-pop:    0 4px 14px 0 rgba(0,0,0,0.25);   /* tooltip, dropdown */
  --shadow-modal:  0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

  /* Spacing Scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Z-index Scale */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400; /* backdrop 399 */
  --z-toast: 500;
  --z-tooltip: 600;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.0, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.4, 0, 1, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
}

/* Dark mode reserved tokens */
.entriso-wrap[data-theme="dark"] {
  --color-canvas:         #0f0f1a;
  --color-surface:        #1a1a2e;
  --color-surface-sunken: #1e1e35;
  --color-border:         #2e2e50;
  --color-text:           #e2e8f0;
  --color-muted:          #94a3b8;
  --color-primary:        #7c6ef5;
  --color-primary-soft:   #2d2560;
  --color-brand-dark:     #ffffff;
}

@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;
  }
}