/* ============================================================
   VIDARIA DESIGN TOKENS — canonical
   ------------------------------------------------------------
   Ported verbatim from Vidaria-mockup/demo/css/variables.css.
   Mount BEFORE any component CSS in _SpaLayout.cshtml.

   These tokens are the single source of truth for the
   Vidaria 1.1 rebrand. The older `vidaria-design-system.css`
   (v-* utility classes) coexists during the migration but
   should be progressively replaced.

   Naming rules:
     - Unprefixed token names match the mockup exactly so
       restyling work can copy CSS rules verbatim from the
       mockup demo source.
     - Prefixed `--vidaria-*` tokens in
       `vidaria-design-system.css` remain valid for legacy
       v-btn / v-card / v-input classes.
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --vidaria-blue:       #103255;
  --vidaria-blue-hover: #0b2440;
  --vidaria-blue-light: #1a4a7a;
  --vidaria-blue-mid:   #1e5ca0;
  --vidaria-blue-pale:  #e8f0f8;
  --vidaria-blue-tint:  #f0f5fb;
  --accent-blue:        #2563eb;
  --accent-blue-light:  #3b82f6;

  /* ── Neutral Scale ── */
  --white:       #ffffff;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-150:    #eaecf1;
  --gray-200:    #e5e7eb;
  --gray-300:    #d1d5db;
  --gray-400:    #9ca3af;
  --gray-500:    #6b7280;
  --gray-600:    #4b5563;
  --gray-700:    #374151;
  --gray-800:    #1f2937;
  --gray-900:    #111827;
  --black:       #0a0a0a;

  /* ── Semantic Colors ──
     Locked status semantics (mirrors MapPage rules):
       green  = healthy / moving / complete / active / on-shift
       red    = danger / stopped / missed / no-signal / incident
       yellow = warning / idle / late / pending
       blue   = informational / in-progress / scheduled
       purple = photo / ancillary
       gray   = neutral / off-shift / scheduled-future                 */
  --success:        #10b981;
  --success-light:  #d1fae5;
  --success-text:   #065f46;
  --warning:        #f59e0b;
  --warning-light:  #fef3c7;
  --warning-text:   #92400e;
  --danger:         #ef4444;
  --danger-light:   #fee2e2;
  --danger-text:    #991b1b;
  --info:           #3b82f6;
  --info-light:     #dbeafe;
  --info-text:      #1e40af;
  --purple:         #8b5cf6;
  --purple-light:   #ede9fe;
  --orange:         #f97316;
  --orange-light:   #ffedd5;
  --teal:           #14b8a6;
  --teal-light:     #ccfbf1;

  /* ── Typography ── */
  --font-family:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:   0.6875rem;  /* 11px */
  --font-size-sm:   0.75rem;    /* 12px */
  --font-size-base: 0.875rem;   /* 14px */
  --font-size-md:   1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */

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

  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;

  /* ── Spacing (8px grid) ── */
  --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 */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ── Border Radius ── */
  --radius-xs: 0.25rem;   /* 4px */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ── Shadows (Vidaria-blue glow, not gray) ── */
  --shadow-xs:    0 1px 2px 0 rgba(16, 50, 85, 0.04);
  --shadow-sm:    0 1px 3px 0 rgba(16, 50, 85, 0.06), 0 1px 2px -1px rgba(16, 50, 85, 0.04);
  --shadow-md:    0 4px 6px -1px rgba(16, 50, 85, 0.07), 0 2px 4px -2px rgba(16, 50, 85, 0.05);
  --shadow-lg:    0 10px 15px -3px rgba(16, 50, 85, 0.08), 0 4px 6px -4px rgba(16, 50, 85, 0.06);
  --shadow-xl:    0 20px 25px -5px rgba(16, 50, 85, 0.10), 0 8px 10px -6px rgba(16, 50, 85, 0.06);
  --shadow-2xl:   0 25px 50px -12px rgba(16, 50, 85, 0.18);
  --shadow-inset: inset 0 2px 4px 0 rgba(16, 50, 85, 0.06);

  /* ── Borders ── */
  --border-color:       var(--gray-200);
  --border-color-light: var(--gray-150);
  --border-width:       1px;
  --border:             1px solid var(--border-color);
  --border-light:       1px solid var(--border-color-light);

  /* ── Transitions ── */
  --transition-fast:    0.1s ease;
  --transition-base:    0.2s ease;
  --transition-slow:    0.35s ease;
  --transition-spring:  0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --nav-height:          64px;
  --sidebar-left-width:  320px;
  --sidebar-right-width: 380px;
  --settings-nav-width:  280px;
  --content-max-width:   1600px;

  /* ── Z-index scale ── */
  --z-base:           1;
  --z-dropdown:       100;
  --z-sidebar:        200;
  --z-nav:            300;
  --z-modal-backdrop: 400;
  --z-modal:          410;
  --z-toast:          500;
}