/*
 * cybersec-mcp Design System - CSS Custom Properties
 * Version 2.0 | May 2026
 *
 * Supports dark (default) and light themes via [data-theme] attribute.
 */

/* ===================================================================
   FONTS
   =================================================================== */

:root {

  /* -----------------------------------------------------------------
     TYPOGRAPHY: Font Families
     ----------------------------------------------------------------- */
  --font-sans:                'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:                'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* -----------------------------------------------------------------
     TYPOGRAPHY: Font Weights
     ----------------------------------------------------------------- */
  --font-regular:             400;
  --font-medium:              500;
  --font-semibold:            600;
  --font-bold:                700;

  /* -----------------------------------------------------------------
     TYPOGRAPHY: Size Scale
     ----------------------------------------------------------------- */
  --text-display:             3rem;
  --text-h1:                  2rem;
  --text-h2:                  1.5rem;
  --text-h3:                  1.25rem;
  --text-h4:                  1rem;
  --text-body:                1rem;
  --text-body-sm:             0.875rem;
  --text-caption:             0.75rem;
  --text-overline:            0.6875rem;
  --text-code-size:           0.875rem;
  --text-code-sm-size:        0.8125rem;

  /* -----------------------------------------------------------------
     TYPOGRAPHY: Line Heights
     ----------------------------------------------------------------- */
  --leading-display:          1.1;
  --leading-h1:               1.2;
  --leading-h2:               1.25;
  --leading-h3:               1.3;
  --leading-body:             1.6;
  --leading-body-sm:          1.5;
  --leading-caption:          1.4;
  --leading-code:             1.65;

  /* -----------------------------------------------------------------
     TYPOGRAPHY: Letter Spacing
     ----------------------------------------------------------------- */
  --tracking-overline:        0.08em;
  --tracking-tight:          -0.01em;
  --tracking-normal:          0;
  --tracking-tag:             0.01em;

  /* -----------------------------------------------------------------
     SPACING: 8px Grid System
     ----------------------------------------------------------------- */
  --space-1:                  4px;
  --space-2:                  8px;
  --space-3:                  12px;
  --space-4:                  16px;
  --space-5:                  20px;
  --space-6:                  24px;
  --space-7:                  32px;
  --space-8:                  40px;
  --space-9:                  48px;
  --space-10:                 64px;
  --space-11:                 80px;
  --space-12:                 96px;

  /* -----------------------------------------------------------------
     BORDER RADIUS (capped at 8px for crispness)
     ----------------------------------------------------------------- */
  --radius-sm:                4px;
  --radius-md:                6px;
  --radius-lg:                8px;
  --radius-xl:                8px;
  --radius-2xl:               8px;
  --radius-3xl:               8px;
  --radius-full:              9999px;

  /* -----------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------- */
  --sidebar-width:            260px;
  --sidebar-collapsed:        64px;
  --topbar-height:            64px;
  --content-max-width:        1200px;
  --card-min-width:           340px;
  --grid-gap:                 24px;

  /* -----------------------------------------------------------------
     TRANSITIONS
     ----------------------------------------------------------------- */
  --transition-fast:          150ms ease;
  --transition-base:          200ms ease;
  --transition-slow:          300ms ease-out;
  --transition-sidebar:       200ms ease-in-out;
  --transition-dropdown-in:   150ms ease-out;
  --transition-dropdown-out:  100ms ease-in;

  /* -----------------------------------------------------------------
     Z-INDEX SCALE
     ----------------------------------------------------------------- */
  --z-base:                   0;
  --z-dropdown:               100;
  --z-sidebar:                400;
  --z-topbar:                 300;
  --z-modal-backdrop:         500;
  --z-modal:                  500;
  --z-toast:                  600;
  --z-tooltip:                700;

  /* -----------------------------------------------------------------
     ICON SIZES
     ----------------------------------------------------------------- */
  --icon-xs:                  14px;
  --icon-sm:                  16px;
  --icon-md:                  20px;
  --icon-lg:                  24px;
  --icon-xl:                  32px;
  --icon-2xl:                 48px;

  /* -----------------------------------------------------------------
     COMPONENT: Input
     ----------------------------------------------------------------- */
  --input-height:             40px;
  --input-height-lg:          48px;
  --input-padding-x:          14px;
  --input-padding-y:          10px;
  --input-icon-offset:        40px;

  /* -----------------------------------------------------------------
     COMPONENT: Button
     ----------------------------------------------------------------- */
  --btn-padding-x:            20px;
  --btn-padding-y:            10px;
  --btn-padding-x-sm:         16px;
  --btn-padding-y-sm:         8px;

  /* -----------------------------------------------------------------
     COMPONENT: Card
     ----------------------------------------------------------------- */
  --card-padding:             24px;
  --card-min-height:          160px;

  /* -----------------------------------------------------------------
     COMPONENT: Tag / Badge
     ----------------------------------------------------------------- */
  --tag-padding-x:            10px;
  --tag-padding-y:            2px;

  /* -----------------------------------------------------------------
     COMPONENT: Copy Button
     ----------------------------------------------------------------- */
  --copy-success-duration:    2000ms;

  /* -----------------------------------------------------------------
     ANIMATION: Skeleton Loading
     ----------------------------------------------------------------- */
  --skeleton-duration:        1.5s;
}


/* ===================================================================
   DARK THEME (default)
   =================================================================== */

[data-theme="dark"] {
  --bg-base:                  #0f1117;
  --bg-raised:                #161922;
  --bg-elevated:              #1c1f2b;
  --bg-overlay:               #252a38;
  --bg-input:                 #12151e;

  --text-primary:             #e5e7eb;
  --text-secondary:           #9ca3af;
  --text-tertiary:            #6b7280;
  --text-disabled:            #3d4455;
  --text-inverse:             #0f1117;

  --color-primary:            #10b981;
  --color-primary-hover:      #0ea472;
  --color-primary-muted:      rgba(16, 185, 129, 0.10);

  --color-secondary:          #6366f1;
  --color-secondary-muted:    rgba(99, 102, 241, 0.10);

  --text-code:                #a5b4fc;
  --text-link:                #6366f1;
  --text-link-hover:          #818cf8;

  --border-default:           #1e2330;
  --border-subtle:            rgba(30, 35, 48, 0.5);
  --border-focus:             #10b981;
  --border-input:             #252a38;
  --border-input-hover:       #363d50;

  --color-success:            #22c55e;
  --color-success-bg:         rgba(34, 197, 94, 0.08);
  --color-warning:            #f59e0b;
  --color-warning-bg:         rgba(245, 158, 11, 0.08);
  --color-danger:             #ef4444;
  --color-danger-bg:          rgba(239, 68, 68, 0.08);
  --color-info:               #6366f1;
  --color-info-bg:            rgba(99, 102, 241, 0.08);

  --color-critical:           #ef4444;
  --color-high:               #f59e0b;
  --color-medium:             #6366f1;
  --color-low:                #22c55e;

  --shadow-card:              0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-card-hover:        0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-dropdown:          0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-button-primary:    none;
  --shadow-focus-ring:        0 0 0 2px var(--bg-base), 0 0 0 4px var(--color-primary);

  --code-accent-border:       #10b981;
}


/* ===================================================================
   LIGHT THEME
   =================================================================== */

[data-theme="light"] {
  --bg-base:                  #ffffff;
  --bg-raised:                #f9fafb;
  --bg-elevated:              #f3f4f6;
  --bg-overlay:               #e5e7eb;
  --bg-input:                 #f9fafb;

  --text-primary:             #111827;
  --text-secondary:           #4b5563;
  --text-tertiary:            #9ca3af;
  --text-disabled:            #d1d5db;
  --text-inverse:             #ffffff;

  --color-primary:            #059669;
  --color-primary-hover:      #047857;
  --color-primary-muted:      rgba(5, 150, 105, 0.08);

  --color-secondary:          #4f46e5;
  --color-secondary-muted:    rgba(79, 70, 229, 0.08);

  --text-code:                #1e40af;
  --text-link:                #4f46e5;
  --text-link-hover:          #6366f1;

  --border-default:           #e5e7eb;
  --border-subtle:            rgba(229, 231, 235, 0.5);
  --border-focus:             #059669;
  --border-input:             #d1d5db;
  --border-input-hover:       #9ca3af;

  --color-success:            #16a34a;
  --color-success-bg:         rgba(22, 163, 74, 0.08);
  --color-warning:            #d97706;
  --color-warning-bg:         rgba(217, 119, 6, 0.08);
  --color-danger:             #dc2626;
  --color-danger-bg:          rgba(220, 38, 38, 0.06);
  --color-info:               #4f46e5;
  --color-info-bg:            rgba(79, 70, 229, 0.06);

  --color-critical:           #dc2626;
  --color-high:               #d97706;
  --color-medium:             #4f46e5;
  --color-low:                #16a34a;

  --shadow-card:              0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card-hover:        0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-dropdown:          0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-button-primary:    none;
  --shadow-focus-ring:        0 0 0 2px var(--bg-base), 0 0 0 4px var(--color-primary);

  --code-accent-border:       #059669;
}


/* =====================================================================
   BASE RESET & GLOBAL STYLES
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--font-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--bg-base);
  min-height: 100vh;
}


/* =====================================================================
   SCROLLBAR
   ===================================================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-overlay);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-overlay) transparent;
}


/* =====================================================================
   FOCUS STYLES
   ===================================================================== */

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =====================================================================
   KEYFRAME ANIMATIONS
   ===================================================================== */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 0.12; }
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}