/**
 * Parallax GUI — Design Tokens v2.0
 * Source: docs/gui/baselines/parallax-gui-v2/110.iQs-Parallax-GUI-UX-AI-Design-v2.md
 * Frozen Baseline: APPROVED BASELINE — C-01 through C-25
 *
 * Prefix: --plx-*
 * Token prefix is locked per §12 and governance/PARALLAX_GUI_IMPLEMENTATION_FREEZE_NOTICE.md
 *
 * COLOR DOMAIN SEPARATION (VG-13):
 *   Domain 1: VAPT Severity (§12) — --plx-vapt-*
 *   Domain 2: Doctrine State (§11.5) — --plx-doctrine-*
 *   Domain 3: Graph/Risk (chart palette) — --plx-graph-*
 *   Domain 4: Map Uncertainty (§9.5) — --plx-map-*
 *   These 4 domains are independent. Never collapse them.
 */


/* ===================================================================
   PARALLAX PLATFORM BASE UI TOKENS
   Scope: application shell, navigation, panels, cards, buttons,
   borders, active/focus states, branding accents, and contrast.
   These tokens are not chart, status, severity, heatmap, or data
   visualization palettes.
   =================================================================== */
:root {
  --black: #000000;
  --white: #ffffff;
  --lazuli-100: #26619C;
  --lazuli-95: #3169A1;
  --lazuli-90: #3C71A6;
  --lazuli-85: #4779AB;
  --lazuli-80: #5181B0;

  --plx-platform-black: var(--black);
  --plx-platform-white: var(--white);
  --plx-platform-lazuli-100: var(--lazuli-100);
  --plx-platform-lazuli-95: var(--lazuli-95);
  --plx-platform-lazuli-90: var(--lazuli-90);
  --plx-platform-lazuli-85: var(--lazuli-85);
  --plx-platform-lazuli-80: var(--lazuli-80);
}

/* ===================================================================
   DOMAIN 1: VAPT SEVERITY PALETTE (§12)
   Locked HEX values — do not approximate, do not substitute.
   =================================================================== */
:root {
  --plx-vapt-critical-bg: #8B0000;
  --plx-vapt-critical-text: #FFFFFF;
  --plx-vapt-critical-border: #5C0000;
  --plx-vapt-critical-icon: #FFFFFF;

  --plx-vapt-high-bg: #FF0000;
  --plx-vapt-high-text: #FFFFFF;
  --plx-vapt-high-border: #CC0000;
  --plx-vapt-high-icon: #FFFFFF;

  --plx-vapt-medium-bg: #FF8C00;
  --plx-vapt-medium-text: #000000;
  --plx-vapt-medium-border: #CC7000;
  --plx-vapt-medium-icon: #000000;

  --plx-vapt-low-bg: #FFD700;
  --plx-vapt-low-text: #000000;
  --plx-vapt-low-border: #8B6914;
  --plx-vapt-low-icon: #8B6914;

  --plx-vapt-info-bg: #A9A9A9;
  --plx-vapt-info-text: #000000;
  --plx-vapt-info-border: #737373;
  --plx-vapt-info-icon: #000000;

  --plx-vapt-badge-font-size: 14px;
  --plx-vapt-badge-font-weight: 700;
  --plx-vapt-badge-border-width: 2px;
  --plx-vapt-badge-radius: 4px;
  --plx-vapt-badge-padding: 4px 10px;
  --plx-vapt-badge-icon-size: 14px;

  --plx-vapt-hover-brighten: 1.2;
  --plx-vapt-hover-scale: 1.02;
  --plx-vapt-hover-shadow: 0 2px 8px rgba(0,0,0,0.3);
  --plx-vapt-selected-ring-width: 2px;
  --plx-vapt-disabled-opacity: 0.5;
}

/* ===================================================================
   DOMAIN 2: DOCTRINE STATE PALETTE (§11.5)
   =================================================================== */
:root {
  --plx-doctrine-verified: #16A34A;
  --plx-doctrine-ai-suggested: #7C3AED;
  --plx-doctrine-pending-review: #F59E0B;
  --plx-doctrine-human-approved: #2563EB;
  --plx-doctrine-rejected: #DC2626;
  --plx-doctrine-expired: #6B7280;
}

/* ===================================================================
   DOMAIN 3: GRAPH/RISK PALETTE (chart colors)
   =================================================================== */
:root {
  --plx-graph-1: #2563EB;
  --plx-graph-2: #7C3AED;
  --plx-graph-3: #0891B2;
  --plx-graph-4: #059669;
  --plx-graph-5: #CA8A04;
  --plx-graph-6: #DC2626;
  --plx-graph-7: #DB2777;
  --plx-graph-8: #9333EA;
}

/* ===================================================================
   DOMAIN 4: MAP UNCERTAINTY PALETTE (§9.5)
   =================================================================== */
:root {
  --plx-map-confirmed: #16A34A;
  --plx-map-high-confidence: #2563EB;
  --plx-map-moderate-confidence: #F59E0B;
  --plx-map-low-confidence: #EF4444;
}

/* ===================================================================
   THEME: DARK (User-selectable alternate — CTO Override applied)
   =================================================================== */
.theme-dark {
  color-scheme: dark;

  --plx-color-brand-primary: #3B82F6;
  --plx-color-brand-primary-hover: #60A5FA;
  --plx-color-brand-primary-active: #93BBFD;
  --plx-color-brand-secondary: #A78BFA;
  --plx-color-brand-tertiary: #22D3EE;

  --plx-color-surface-page: #000000;
  --plx-color-surface-primary: #0A0A0A;
  --plx-color-surface-secondary: #141414;
  --plx-color-surface-tertiary: #1F1F1F;
  --plx-color-surface-elevated: #0A0A0A;
  --plx-color-surface-overlay: rgba(0,0,0,0.7);
  --plx-color-surface-nav: #000000;

  --plx-color-text-primary: #F5F5F5;
  --plx-color-text-secondary: #A3A3A3;
  --plx-color-text-tertiary: #737373;
  --plx-color-text-inverse: #0F172A;
  --plx-color-text-link: #60A5FA;

  --plx-color-border-primary: #1F1F1F;
  --plx-color-border-secondary: #2A2A2A;
  --plx-color-border-focus: #3B82F6;
  --plx-color-border-error: #EF4444;
  --plx-color-border-success: #22C55E;

  --plx-color-status-online: #22C55E;
  --plx-color-status-offline: #EF4444;
  --plx-color-status-warning: #F59E0B;
  --plx-color-status-degraded: #F97316;
  --plx-color-status-unknown: #6B7280;

  --plx-color-accent-subtle: rgba(59, 130, 246, 0.16);
  --plx-color-danger-subtle: rgba(239, 68, 68, 0.16);
  --plx-color-warning-subtle: rgba(245, 158, 11, 0.16);
  --plx-color-success-subtle: rgba(34, 197, 94, 0.14);

  --plx-nav-text: #A3A3A3;
  --plx-nav-text-active: #FFFFFF;
  --plx-nav-active-bg: rgba(59, 130, 246, 0.18);
  --plx-nav-hover-bg: #1F1F1F;
  --plx-nav-font-family: var(--plx-type-family-body);

  --plx-shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --plx-shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --plx-shadow-md: 0 4px 6px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --plx-shadow-lg: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
  --plx-shadow-xl: 0 20px 25px rgba(0,0,0,0.5), 0 8px 10px rgba(0,0,0,0.3);
  --plx-shadow-focus: 0 0 0 3px rgba(59,130,246,0.4);

  --plx-bg: #000000;
  --plx-fg: #FAFAFA;
  --plx-bg-primary: var(--plx-color-surface-primary);
  --plx-bg-hover: var(--plx-color-surface-tertiary);
}

/* ===================================================================
   THEME: LIGHT (Product Default — CTO Override §5.1, VG-10f)
   =================================================================== */
.theme-light {
  color-scheme: light;

  --plx-color-brand-primary: #2563EB;
  --plx-color-brand-primary-hover: #1D4ED8;
  --plx-color-brand-primary-active: #1E40AF;
  --plx-color-brand-secondary: #7C3AED;
  --plx-color-brand-tertiary: #0891B2;

  --plx-color-surface-page: #FFFFFF;
  --plx-color-surface-primary: #FFFFFF;
  --plx-color-surface-secondary: #F5F5F5;
  --plx-color-surface-tertiary: #E5E5E5;
  --plx-color-surface-elevated: #FFFFFF;
  --plx-color-surface-overlay: rgba(0,0,0,0.5);
  --plx-color-surface-nav: #FFFFFF;

  --plx-color-text-primary: #0F172A;
  --plx-color-text-secondary: #475569;
  --plx-color-text-tertiary: #94A3B8;
  --plx-color-text-inverse: #F5F5F5;
  --plx-color-text-link: #2563EB;

  --plx-color-border-primary: #E5E5E5;
  --plx-color-border-secondary: #D4D4D4;
  --plx-color-border-focus: #2563EB;
  --plx-color-border-error: #DC2626;
  --plx-color-border-success: #16A34A;

  --plx-color-status-online: #22C55E;
  --plx-color-status-offline: #EF4444;
  --plx-color-status-warning: #F59E0B;
  --plx-color-status-degraded: #F97316;
  --plx-color-status-unknown: #94A3B8;

  --plx-color-accent-subtle: rgba(37, 99, 235, 0.10);
  --plx-color-danger-subtle: rgba(220, 38, 38, 0.10);
  --plx-color-warning-subtle: rgba(245, 158, 11, 0.12);
  --plx-color-success-subtle: rgba(22, 163, 74, 0.10);

  --plx-nav-text: #0891B2;
  --plx-nav-text-active: #0891B2;
  --plx-nav-active-bg: rgba(8, 145, 178, 0.12);
  --plx-nav-hover-bg: rgba(8, 145, 178, 0.08);
  --plx-nav-font-family: 'Segoe UI', 'Segoe UI Light', Arial, sans-serif;

  --plx-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --plx-shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --plx-shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --plx-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --plx-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04);
  --plx-shadow-focus: 0 0 0 3px rgba(37,99,235,0.3);

  --plx-bg: #FFFFFF;
  --plx-fg: #09090B;
  --plx-bg-primary: var(--plx-color-surface-primary);
  --plx-bg-hover: var(--plx-color-surface-tertiary);
}

/* ===================================================================
   SHARED TOKENS (theme-independent)
   =================================================================== */
:root {
  --plx-type-family-body: 'Inter', system-ui, -apple-system, sans-serif;
  --plx-type-family-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --plx-type-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --plx-type-family-sans: var(--plx-type-family-body);

  --plx-type-display-size: 36px;
  --plx-type-display-line-height: 1.2;
  --plx-type-display-weight: 700;
  --plx-type-h1-size: 28px;
  --plx-type-h1-line-height: 1.3;
  --plx-type-h1-weight: 700;
  --plx-type-h2-size: 22px;
  --plx-type-h2-line-height: 1.35;
  --plx-type-h2-weight: 600;
  --plx-type-h3-size: 18px;
  --plx-type-h3-line-height: 1.4;
  --plx-type-h3-weight: 600;
  --plx-type-h4-size: 16px;
  --plx-type-h4-line-height: 1.4;
  --plx-type-h4-weight: 600;
  --plx-type-body-size: 14px;
  --plx-type-body-line-height: 1.5;
  --plx-type-body-weight: 400;
  --plx-type-body-sm-size: 12px;
  --plx-type-body-sm-line-height: 1.5;
  --plx-type-body-sm-weight: 400;
  --plx-type-caption-size: 11px;
  --plx-type-caption-line-height: 1.45;
  --plx-type-caption-weight: 400;
  --plx-type-mono-size: 13px;
  --plx-type-mono-line-height: 1.6;
  --plx-type-mono-weight: 400;
  --plx-type-mono-sm-size: 11px;
  --plx-type-mono-sm-line-height: 1.5;
  --plx-type-mono-sm-weight: 400;
  --plx-type-weight-regular: 400;
  --plx-type-weight-medium: 500;
  --plx-type-weight-semibold: 600;
  --plx-type-weight-bold: 700;

  --plx-space-0: 0px;
  --plx-space-0-5: 2px;
  --plx-space-1: 4px;
  --plx-space-1-5: 6px;
  --plx-space-2: 8px;
  --plx-space-3: 12px;
  --plx-space-4: 16px;
  --plx-space-5: 20px;
  --plx-space-6: 24px;
  --plx-space-8: 32px;
  --plx-space-10: 40px;
  --plx-space-12: 48px;
  --plx-space-16: 64px;
  --plx-space-20: 80px;

  --plx-radius-none: 0px;
  --plx-radius-sm: 4px;
  --plx-radius-md: 6px;
  --plx-radius-lg: 8px;
  --plx-radius-xl: 12px;
  --plx-radius-full: 9999px;

  --plx-motion-duration-instant: 0ms;
  --plx-motion-duration-fast: 100ms;
  --plx-motion-duration-normal: 200ms;
  --plx-motion-duration-slow: 300ms;
  --plx-motion-duration-slower: 500ms;
  --plx-motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --plx-motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --plx-motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --plx-motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --plx-z-base: 0;
  --plx-z-dropdown: 100;
  --plx-z-sticky: 200;
  --plx-z-nav: 300;
  --plx-z-overlay: 400;
  --plx-z-advisor: 500;
  --plx-z-modal: 600;
  --plx-z-popover: 700;
  --plx-z-toast: 800;
  --plx-z-command: 900;
  --plx-z-tooltip: 9000;
  --plx-z-max: 9999;

  --plx-icon-size-sm: 16px;
  --plx-icon-size-md: 20px;
  --plx-icon-size-lg: 24px;
  --plx-icon-size-xl: 32px;
  --plx-icon-stroke: 1.5px;

  --plx-nav-width-expanded: 240px;
  --plx-nav-width-collapsed: 64px;
  --plx-nav-item-height: 40px;
  --plx-nav-item-gap: 4px;
  --plx-nav-bg: var(--plx-color-surface-nav);
  --plx-nav-indicator: var(--plx-color-brand-primary);

  --plx-card-padding: var(--plx-space-4);
  --plx-card-padding-compact: var(--plx-space-3);
  --plx-card-radius: var(--plx-radius-lg);
  --plx-card-border: 1px solid var(--plx-color-border-primary);
  --plx-card-shadow: var(--plx-shadow-xs);
  --plx-card-shadow-hover: var(--plx-shadow-sm);

  --plx-btn-height-sm: 32px;
  --plx-btn-height-md: 36px;
  --plx-btn-height-lg: 44px;
  --plx-btn-padding-x: var(--plx-space-4);
  --plx-btn-radius: var(--plx-radius-md);
  --plx-btn-font-size: var(--plx-type-body-size);
  --plx-btn-font-weight: var(--plx-type-weight-medium);

  --plx-table-header-bg: var(--plx-color-surface-secondary);
  --plx-table-header-text: var(--plx-color-text-secondary);
  --plx-table-row-height: 44px;
  --plx-table-row-height-compact: 36px;
  --plx-table-border: 1px solid var(--plx-color-border-primary);
  --plx-table-stripe-bg: var(--plx-color-surface-secondary);
  --plx-table-hover-bg: var(--plx-color-surface-tertiary);

  --plx-border: var(--plx-color-border-primary);
  --plx-accent: var(--plx-color-brand-primary);
  --plx-danger: var(--plx-color-border-error);
  --plx-text-secondary: var(--plx-color-text-secondary);
  --plx-radius: var(--plx-radius-md);
  --plx-text-primary: var(--plx-color-text-primary);
  --plx-font-sm: var(--plx-type-body-sm-size);
  --plx-font-lg: var(--plx-type-h3-size);
  --plx-color-accent: var(--plx-color-brand-primary);

  --plx-vapt-critical: var(--plx-vapt-critical-bg);
  --plx-vapt-high: var(--plx-vapt-high-bg);
  --plx-vapt-medium: var(--plx-vapt-medium-bg);
  --plx-vapt-low: var(--plx-vapt-low-bg);

  --plx-badge-height: 22px;
  --plx-badge-padding-x: var(--plx-space-2);
  --plx-badge-radius: var(--plx-radius-sm);
  --plx-badge-font-size: var(--plx-type-body-sm-size);
  --plx-badge-font-weight: var(--plx-type-weight-medium);

  --plx-ai-badge-bg: rgba(124, 58, 237, 0.1);
  --plx-ai-badge-border: 1px solid rgba(124, 58, 237, 0.3);
  --plx-ai-badge-text: var(--plx-color-brand-secondary);

  --plx-advisor-fab-size: 56px;
  --plx-advisor-fab-offset: 24px;
  --plx-advisor-panel-width: 400px;
  --plx-advisor-z: var(--plx-z-advisor);

  --plx-topbar-height: 56px;
  --plx-statusbar-height: 28px;

  /* ---------------------------------------------------------------
     SLICE 2 TOKENS — Drill-Down, AI Visibility, Approval Gates,
     Provenance Drawer, Geo-Spatial Map Scaffold
     --------------------------------------------------------------- */

  /* Breadcrumb Bar (§7, VG-04) */
  --plx-breadcrumb-height: 36px;
  --plx-breadcrumb-font-size: var(--plx-type-body-sm-size);
  --plx-breadcrumb-separator: '/';
  --plx-breadcrumb-max-visible: 4;
  --plx-breadcrumb-gap: var(--plx-space-1);

  /* Drill-Down Layer Transitions */
  --plx-drill-transition-duration: var(--plx-motion-duration-normal);
  --plx-drill-transition-easing: var(--plx-motion-easing-default);
  --plx-drill-sticky-header-height: 48px;

  /* Entity Detail Tabs (Layer 3) */
  --plx-entity-tab-height: 40px;
  --plx-entity-tab-font-size: var(--plx-type-body-sm-size);
  --plx-entity-tab-active-border: 2px solid var(--plx-color-brand-primary);

  /* AI Disclosure Wrapper (§11, VG-06) */
  --plx-ai-wrapper-border: 1px solid rgba(124, 58, 237, 0.25);
  --plx-ai-wrapper-bg: rgba(124, 58, 237, 0.04);
  --plx-ai-wrapper-radius: var(--plx-radius-lg);
  --plx-ai-wrapper-padding: var(--plx-space-4);
  --plx-ai-marker-height: 24px;
  --plx-ai-marker-font-size: var(--plx-type-body-sm-size);
  --plx-ai-marker-font-weight: var(--plx-type-weight-semibold);
  --plx-ai-confidence-bar-height: 6px;
  --plx-ai-confidence-bar-radius: var(--plx-radius-full);

  /* Approval Gate Modal (§11.2, VG-07, VG-12) */
  --plx-approval-modal-width: 520px;
  --plx-approval-modal-radius: var(--plx-radius-xl);
  --plx-approval-step-size: 32px;
  --plx-approval-step-gap: var(--plx-space-3);

  /* Provenance Drawer (§11.6) */
  --plx-provenance-drawer-width: 400px;
  --plx-provenance-drawer-z: var(--plx-z-overlay);
  --plx-provenance-section-gap: var(--plx-space-3);

  /* Geo-Spatial Map Scaffold (§9, VG-05) */
  --plx-map-layer-panel-width: 260px;
  --plx-map-detail-panel-width: 400px;
  --plx-map-toolbar-height: 48px;
  --plx-map-marker-size-standard: 24px;
  --plx-map-marker-size-reduced: 16px;
  --plx-map-cluster-size: 36px;

  /* Map Location Type Colors (§9, separate from VAPT/doctrine/graph) */
  --plx-map-loc-asset: var(--plx-color-brand-primary);
  --plx-map-loc-customer: #64748B;
  --plx-map-loc-cloud: rgba(59,130,246,0.2);
  --plx-map-loc-telemetry: #F97316;
  --plx-map-loc-attack-inferred: #EF4444;
  --plx-map-loc-threat-intel: #7C3AED;
  --plx-map-loc-uncertain: #6B7280;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --plx-motion-duration-instant: 0ms;
    --plx-motion-duration-fast: 0ms;
    --plx-motion-duration-normal: 0ms;
    --plx-motion-duration-slow: 0ms;
    --plx-motion-duration-slower: 0ms;
  }
}