/**
 * nx-theme.css — Nexus Plugin Suite: Master Token File
 *
 * Single source of truth for all --nx-* CSS custom properties consumed
 * by every plugin in public/plugins/.  Load this file ONCE (in main.php)
 * before Bootstrap and all plugin stylesheets.
 *
 * Token groups:
 *   Brand       — primary orange + hover / light / subtle / border shades
 *   Surface     — background layers (page, card, section, elevated)
 *   Text        — three-level text hierarchy
 *   Border      — default / hover / light border alpha values
 *   Status      — danger / success / warning / info + light and surface variants
 *   Palette     — named accent foreground colors (adapt to dark mode)
 *   Hover       — semantic hover states for status buttons
 *   Overlay     — modal / dialog backdrop
 *   Typography  — shared font stack, size tokens
 *   Radius      — xs → xl + full (pill) scale
 *   Shadow      — three elevation levels
 *   Transition  — shared easing
 *
 * Dark mode:
 *   Overrides use [data-bs-theme="dark"] to match Bootstrap 5 convention.
 *   Palette accent colors shift to lighter variants for dark-bg readability.
 *   Status surface backgrounds invert to their dark equivalents.
 */

/* ─────────────────────────────────────────────────────────────────────────
   LIGHT MODE  (default / :root)
   ───────────────────────────────────────────────────────────────────────── */
:root {

    /* ── Brand ─────────────────────────────────────────────────────────── */
    --nx-primary:         #FF6B35;
    --nx-primary-hover:   #E85D2A;
    --nx-primary-dark:    #c94d1e;
    --nx-primary-light:   rgba(255, 107, 53, 0.10);
    --nx-primary-subtle:  rgba(255, 107, 53, 0.06);
    --nx-primary-border:  rgba(255, 107, 53, 0.30);

    /* ── Surface ───────────────────────────────────────────────────────── */
    --nx-surface:           #FFFFFF;
    --nx-surface-alt:       #F7F9FA;
    --nx-surface-secondary: rgba(100, 130, 140, 0.04);

    /* ── Text ──────────────────────────────────────────────────────────── */
    --nx-text:       #0D2024;       /* deepest — headings, titles */
    --nx-text-main:  #004E64;       /* body — labels, values */
    --nx-text-muted: #7A9E9F;       /* secondary — hints, captions */

    /* ── Border ────────────────────────────────────────────────────────── */
    --nx-border:       rgba(122, 158, 159, 0.40);
    --nx-border-hover: rgba(122, 158, 159, 0.80);
    --nx-border-light: rgba(122, 158, 159, 0.15);

    /* ── Status (foreground + transparent light bg) ─────────────────────── */
    --nx-danger:        #ef4444;
    --nx-danger-light:  rgba(239, 68, 68, 0.08);
    --nx-success:       #22c55e;
    --nx-success-light: rgba(34, 197, 94, 0.09);
    --nx-warning:       #f59e0b;
    --nx-warning-light: rgba(245, 158, 11, 0.10);
    --nx-info:          #3b82f6;
    --nx-info-light:    rgba(59, 130, 246, 0.10);

    /* ── Status surface backgrounds (full opaque, for badges / notifications) */
    --nx-success-surface:      #dcfce7;
    --nx-success-surface-text: #14532d;
    --nx-danger-surface:       #fee2e2;
    --nx-danger-surface-text:  #991b1b;
    --nx-warning-surface:      #fef3c7;
    --nx-warning-surface-text: #92400e;
    --nx-info-surface:         #dbeafe;
    --nx-info-surface-text:    #1e40af;

    /* ── Palette accent foreground (icon chips, badges, named colors) ──── */
    --nx-green:   #16a34a;
    --nx-red:     #dc2626;
    --nx-amber:   #d97706;
    --nx-blue:    #2563eb;
    --nx-teal:    #0d9488;
    --nx-purple:  #a855f7;
    --nx-indigo:  #4f46e5;

    /* ── Semantic hover states ──────────────────────────────────────────── */
    --nx-danger-hover:  #dc2626;
    --nx-success-hover: #15803d;

    /* ── Overlay (modal backdrop / dialog scrim) ────────────────────────── */
    --nx-overlay: rgba(0, 20, 30, 0.55);

    /* ── Typography ────────────────────────────────────────────────────── */
    --nx-font-family:   'Spline Sans', system-ui, -apple-system, sans-serif;
    --nx-font-size-sm:  0.875rem;
    --nx-font-size-xs:  0.75rem;

    /* ── Radius ────────────────────────────────────────────────────────── */
    --nx-radius-xs:   0.25rem;      /* tags, checkboxes */
    --nx-radius-sm:   0.375rem;     /* small buttons, table cells */
    --nx-radius-md:   0.75rem;      /* inputs, dropdowns, modals inner */
    --nx-radius-lg:   1rem;         /* cards, panels */
    --nx-radius-xl:   1.25rem;      /* large cards, step-form, upload */
    --nx-radius-full: 9999px;       /* pills, avatars, toggles */

    /* ── Shadow ────────────────────────────────────────────────────────── */
    --nx-shadow-sm: 0 1px 3px  rgba(0, 55, 70, 0.06);
    --nx-shadow-md: 0 2px 16px rgba(0, 55, 70, 0.07);
    --nx-shadow-lg: 0 4px 24px rgba(0, 55, 70, 0.10);

    /* ── Transition ────────────────────────────────────────────────────── */
    --nx-transition: all 0.2s cubic-bezier(0.2, 0.0, 0, 1.0);
}

/* Material Symbols base class used across Nexus plugins */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* ─────────────────────────────────────────────────────────────────────────
   DARK MODE  [data-bs-theme="dark"]
   Surface / text / border adapt. Palette shifts to lighter variants.
   Status surfaces invert to dark equivalents.
   ───────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {

    /* ── Surface ───────────────────────────────────────────────────────── */
    --nx-surface:           #1e2a30;
    --nx-surface-alt:       #253038;
    --nx-surface-secondary: rgba(255, 255, 255, 0.02);

    /* ── Text ──────────────────────────────────────────────────────────── */
    --nx-text:       #e2f0f4;
    --nx-text-main:  #c8dfe6;
    --nx-text-muted: #7da8b4;

    /* ── Border ────────────────────────────────────────────────────────── */
    --nx-border:       rgba(122, 158, 159, 0.25);
    --nx-border-hover: rgba(122, 158, 159, 0.50);
    --nx-border-light: rgba(122, 158, 159, 0.12);

    /* ── Status surface backgrounds (dark variants) ─────────────────────── */
    --nx-success-surface:      #14532d;
    --nx-success-surface-text: #86efac;
    --nx-danger-surface:       #7f1d1d;
    --nx-danger-surface-text:  #fca5a5;
    --nx-warning-surface:      #78350f;
    --nx-warning-surface-text: #fcd34d;
    --nx-info-surface:         #0f172a;
    --nx-info-surface-text:    #93c5fd;

    /* ── Palette accent foreground (lighter for dark-bg readability) ────── */
    --nx-green:   #86efac;
    --nx-red:     #fca5a5;
    --nx-amber:   #fcd34d;
    --nx-blue:    #93c5fd;
    --nx-teal:    #5eead4;
    --nx-purple:  #d8b4fe;
    --nx-indigo:  #a5b4fc;
}

/* ─────────────────────────────────────────────────────────────────────────
   TMS COMPATIBILITY ALIASES
   Map --tms-* variables to --nx-* equivalents so legacy references work.
   New code should use --nx-* directly.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* Primary */
    --tms-primary:            var(--nx-primary);
    --tms-primary-rgb:        255, 107, 53;
    --tms-primary-light:      var(--nx-primary-light);
    --tms-primary-subtle:     var(--nx-primary-subtle);
    --tms-primary-border:     var(--nx-primary-border);
    --tms-primary-text:       var(--nx-text);
    --tms-primary-hover:      var(--nx-primary-hover);

    /* Status */
    --tms-success:            var(--nx-success);
    --tms-success-rgb:        34, 197, 94;
    --tms-success-light:      var(--nx-success-light);
    --tms-danger:             var(--nx-danger);
    --tms-danger-rgb:         239, 68, 68;
    --tms-danger-light:       var(--nx-danger-light);
    --tms-danger-surface:     var(--nx-danger-surface);
    --tms-info:               var(--nx-info);
    --tms-info-rgb:           59, 130, 246;
    --tms-warning:            var(--nx-warning);
    --tms-warning-rgb:        245, 158, 11;

    /* Semantic backgrounds */
    --tms-bg-primary:         var(--nx-surface);
    --tms-bg-secondary:        var(--nx-surface-alt);
    --tms-bg-tertiary:         var(--nx-surface-secondary);
    --tms-bg-hover:            var(--nx-surface-alt);

    /* Semantic text */
    --tms-text-primary:        var(--nx-text);
    --tms-text-secondary:      var(--nx-text-muted);
    --tms-text-muted:          var(--nx-text-muted);

    /* Semantic borders */
    --tms-border-primary:      var(--nx-border);
    --tms-border-secondary:    var(--nx-border-light);

    /* Shadows */
    --tms-shadow-sm:           var(--nx-shadow-sm);
    --tms-shadow-md:           var(--nx-shadow-md);
    --tms-shadow-lg:           var(--nx-shadow-lg);

    /* Gray scale */
    --tms-gray-50:   #f9fafb;
    --tms-gray-100:  #f3f4f6;
    --tms-gray-200:  #e5e7eb;
    --tms-gray-300:  #d1d5db;
    --tms-gray-400:  #9ca3af;
    --tms-gray-500:  #6b7280;
    --tms-gray-600:  #4b5563;
    --tms-gray-700:  #374151;
    --tms-gray-800:  #1f2937;
    --tms-gray-900:  #111827;

    /* Domain colors */
    --tms-vehicle:             var(--nx-blue);
    --tms-driver:              var(--nx-green);
    --tms-customer:            var(--nx-teal);
    --tms-contract:            var(--nx-purple);
    --tms-invoice:             var(--nx-amber);
}

/* Dark mode overrides for tms aliases */
[data-bs-theme="dark"] {
    --tms-primary-rgb:        255, 140, 80;
    --tms-success-rgb:        134, 239, 172;
    --tms-danger-rgb:         252, 165, 165;
    --tms-info-rgb:           147, 197, 253;
    --tms-warning-rgb:        252, 211, 77;

    --tms-bg-primary:         var(--nx-surface);
    --tms-bg-secondary:        var(--nx-surface-alt);
    --tms-bg-tertiary:         var(--nx-surface-secondary);
    --tms-bg-hover:            var(--nx-surface-alt);

    --tms-text-primary:        var(--nx-text);
    --tms-text-secondary:      var(--nx-text-muted);
    --tms-text-muted:          var(--nx-text-muted);

    --tms-border-primary:     var(--nx-border);
    --tms-border-secondary:    var(--nx-border-light);

    --tms-gray-50:   #1a1a2e;
    --tms-gray-100:  #24243c;
    --tms-gray-200:  #33334d;
    --tms-gray-300:  #4a4a68;
    --tms-gray-400:  #7a7a9e;
    --tms-gray-500:  #a0a0be;
    --tms-gray-600:  #c0c0d8;
    --tms-gray-700:  #d0d0e4;
    --tms-gray-800:  #e0e0f0;
    --tms-gray-900:  #f0f0f8;
}