/* ══════════════════════════════════════════════════════════════════
   UNIVERSEM DASH — Design Tokens
   Aligned with assets/style.css + config.py
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

:root {
  /* ── Brand core (authoritative — from config.py C dict & style.css) ── */
  --u-navy:        #1B2A4A;
  --u-navy-deep:   #132039;
  --u-cyan:        #00D4C8;
  --u-cyan-light:  #00E8DA;
  --u-cyan-muted:  #7DDDD6;
  --u-teal-dark:   #0A8F8F;
  --u-yellow:      #F5C842;
  --u-yellow-light:#FFD95A;
  --u-coral:       #F26B5B;

  /* ── Neutrals ── */
  --u-white:       #FFFFFF;
  --u-off-white:   #F4F6F9;
  --u-gray-50:     #EEF1F6;
  --u-gray-100:    #DDE2EA;
  --u-gray-200:    #B8C0CF;
  --u-gray-400:    #7A849A;
  --u-gray-600:    #4A5468;
  --u-gray-800:    #2A3247;

  /* ── Semantic ── */
  --u-success:     var(--u-cyan);
  --u-warning:     var(--u-yellow);
  --u-danger:      var(--u-coral);

  /* ── Category palette (Plotly CAT_COLORS) ── */
  --u-cat-1: #B8D468; --u-cat-2: #F5C842; --u-cat-3: #F26B5B;
  --u-cat-4: #4A7BF7; --u-cat-5: #00D4C8; --u-cat-6: #FF69B4;
  --u-cat-7: #9B59B6; --u-cat-8: #E67E22; --u-cat-9: #1ABC9C; --u-cat-10: #34495E;

  /* ── Type ── */
  --u-font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --u-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --u-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Radius ── */
  --u-radius-xs: 4px;
  --u-radius-sm: 8px;
  --u-radius-md: 10px;
  --u-radius-lg: 16px;
  --u-radius-xl: 20px;
  --u-radius-pill: 999px;

  /* ── Shadow ── */
  --u-shadow-1: 0 1px 2px rgba(27,42,74,.05), 0 1px 3px rgba(27,42,74,.04);
  --u-shadow-2: 0 4px 20px rgba(0,212,200,.08);
  --u-shadow-3: 0 20px 60px rgba(0,0,0,.3);
  --u-shadow-focus: 0 0 0 3px rgba(0,212,200,.25);

  /* ── Spacing (4 px base) ── */
  --u-s-1: 4px;  --u-s-2: 8px;  --u-s-3: 12px; --u-s-4: 16px;
  --u-s-5: 20px; --u-s-6: 24px; --u-s-8: 32px; --u-s-10: 40px;
}