/* ═══════════════════════════════════════════════════════════════
   ERP Design System — CSS Variables
   Single source of truth for all --gl-* tokens.
   Three modes controlled by html class:
     html.dark          → dark (default ERP mode)
     html.dim           → dim (navy twilight — new!)
     html:not(.dark):not(.dim) → light
   Load FIRST, before erp-theme.css and all page CSS.
   ═══════════════════════════════════════════════════════════════ */

/* ── Font stacks ─────────────────────────────────────────────── */
:root {
  --gl-font-ui:   'DM Sans', 'Inter', system-ui, sans-serif;
  --gl-font-mono: 'JetBrains Mono', monospace;
}

/* ══════════════════════════════════════════════════════════════
   DARK  — html.dark
   ══════════════════════════════════════════════════════════════ */
:root,
html.dark {
  /* Backgrounds */
  --gl-bg:           #0f1117;
  --gl-surface:      #161b27;
  --gl-elevated:     #1e2535;
  --gl-hover:        #252d40;
  --gl-active:       #2a3450;

  /* Borders */
  --gl-border:       #2a3147;
  --gl-border2:      #3a4666;

  /* Text */
  --gl-text:         #dde3f0;
  --gl-text2:        #b4bcd4;
  --gl-muted:        #6b7894;

  /* Accent (indigo-blue) */
  --gl-accent:       #4f7ef8;
  --gl-accent-dim:   #1e3a7a;
  --gl-accent-glow:  rgba(79,126,248,.15);

  /* Status — solid hex in dark (no rgba) */
  --gl-green:        #34d399;
  --gl-green-dim:    #064e3b;
  --gl-amber:        #fbbf24;
  --gl-amber-dim:    #451a03;
  --gl-red:          #f87171;
  --gl-red-dim:      #450a0a;
  --gl-purple:       #a78bfa;
  --gl-purple-dim:   #2e1065;

  /* Misc */
  --gl-shadow:       0 8px 32px rgba(0,0,0,.5);

  /* Chevron SVG for <select> — muted stroke on dark bg */
  --gl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7894' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   DIM  — html.dim  (navy twilight — lighter than dark, darker than light)
   Filament sees "light" (no html.dark), but our ERP CSS sees html.dim.
   ══════════════════════════════════════════════════════════════ */
html.dim {
  /* Backgrounds — ~30% lighter than dark counterparts */
  --gl-bg:           #171c2c;
  --gl-surface:      #1d2438;
  --gl-elevated:     #242c44;
  --gl-hover:        #2a3350;
  --gl-active:       #303c58;

  /* Borders — slightly lighter than dark */
  --gl-border:       #303a50;
  --gl-border2:      #3d4f6a;

  /* Text — same as dark (still need full contrast) */
  --gl-text:         #dde3f0;
  --gl-text2:        #b4bcd4;
  --gl-muted:        #6b7894;

  /* Accent */
  --gl-accent:       #4f7ef8;
  --gl-accent-dim:   #203f88;
  --gl-accent-glow:  rgba(79,126,248,.15);

  /* Status — solid hex (slightly lighter than dark for the dim context) */
  --gl-green:        #34d399;
  --gl-green-dim:    #065c42;
  --gl-amber:        #fbbf24;
  --gl-amber-dim:    #4d2208;
  --gl-red:          #f87171;
  --gl-red-dim:      #560d0d;
  --gl-purple:       #a78bfa;
  --gl-purple-dim:   #391275;

  --gl-shadow:       0 8px 32px rgba(0,0,0,.4);

  /* Chevron — same dark-mode muted color works on dim bg */
  --gl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7894' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   LIGHT  — html:not(.dark):not(.dim)
   ══════════════════════════════════════════════════════════════ */
html:not(.dark):not(.dim) {
  /* Backgrounds */
  --gl-bg:           #f0f2f8;
  --gl-surface:      #ffffff;
  --gl-elevated:     #f5f7fc;
  --gl-hover:        #eaecf5;
  --gl-active:       #dde3f5;

  /* Borders */
  --gl-border:       #d0d5e8;
  --gl-border2:      #b8c0d8;

  /* Text */
  --gl-text:         #1a2040;
  --gl-text2:        #3a4570;
  --gl-muted:        #6b7894;

  /* Accent */
  --gl-accent:       #3b6ef5;
  --gl-accent-dim:   #dbe5ff;
  --gl-accent-glow:  rgba(59,110,245,.10);

  /* Status — rgba for light mode (tints over white bg) */
  --gl-green:        #059669;
  --gl-green-dim:    rgba(5,150,105,.10);
  --gl-amber:        #d97706;
  --gl-amber-dim:    rgba(217,119,6,.10);
  --gl-red:          #dc2626;
  --gl-red-dim:      rgba(220,38,38,.10);
  --gl-purple:       #7c3aed;
  --gl-purple-dim:   rgba(124,58,237,.10);

  --gl-shadow:       0 4px 20px rgba(0,0,0,.12);

  /* Chevron — darker stroke for light bg */
  --gl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7894' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}