/* ============================================================
   CyberGuard — Design Token System
   Single Source of Truth for Design Values
   Version: 2.0.0 — Aligned with spec
   ============================================================ */

:root {
    /* ===== Background Colors ===== */
    --cg-bg-base: #09090b; /* Pure near-black */
    --cg-bg-surface: #111111; /* Cards, modals, dropdowns */
    --cg-bg-elevated: #18181b; /* Hover states, secondary cards, inputs */

    /* ===== Border Colors ===== */
    --cg-border: rgba(255, 255, 255, 0.08); /* Default border / divider */
    --cg-border-subtle: rgba(255, 255, 255, 0.06); /* Lighter borders */

    /* ===== Text Colors ===== */
    --cg-text-1: #fafafa; /* Primary text — headings, body */
    --cg-text-2: #a1a1aa; /* Secondary text — labels, captions */
    --cg-text-3: #71717a; /* Muted text — disabled, timestamps */

    /* ===== Accent Colors ===== */
    --cg-accent: #ffffff; /* Primary interactive color (white buttons) */
    --cg-accent-hover: #e4e4e7; /* Hover / active accent */
    --cg-accent-muted: rgba(255, 255, 255, 0.08); /* Tinted accent backgrounds */
    --cg-accent-dark: #3b82f6; /* Action/highlight accent (blue) */

    /* ===== Status Colors ===== */
    --cg-success: #22c55e; /* Safe / valid / healthy */
    --cg-success-dark: rgba(34, 197, 94, 0.2);
    --cg-warning: #f59e0b; /* Caution / medium risk */
    --cg-warning-dark: rgba(245, 158, 11, 0.2);
    --cg-danger: #ef4444; /* Critical / invalid / high risk */
    --cg-danger-dark: rgba(239, 68, 68, 0.2);
    --cg-info: #3b82f6; /* Informational / links */
    --cg-info-dark: rgba(59, 130, 246, 0.2);

    /* ===== Functional Aliases ===== */
    --cg-focus-ring: rgba(255, 255, 255, 0.25); /* Keyboard-nav focus ring */
    --cg-overlay: rgba(0, 0, 0, 0.8); /* Modal backdrop */
    --cg-scrollbar: rgba(255, 255, 255, 0.1); /* Custom scrollbar track */
    --cg-disabled-opacity: 0.45; /* Disabled element opacity */

    /* ===== Spacing Scale (4px grid) ===== */
    --cg-space-1: 0.25rem; /*  4px */
    --cg-space-2: 0.5rem; /*  8px */
    --cg-space-3: 0.75rem; /* 12px */
    --cg-space-4: 1rem; /* 16px */
    --cg-space-6: 1.5rem; /* 24px */
    --cg-space-8: 2rem; /* 32px */
    --cg-space-12: 3rem; /* 48px */
    --cg-space-16: 4rem; /* 64px */

    /* ===== Border Radius ===== */
    --cg-radius-sm: 0.375rem; /*  6px — badges, pills */
    --cg-radius-md: 0.375rem; /*  6px — buttons, inputs */
    --cg-radius-lg: 0.5rem; /* 8px — cards, panels */
    --cg-radius-xl: 0.75rem; /* 12px — modals */
    --cg-radius-full: 9999px; /* Circular — avatars */

    /* ===== Shadows ===== */
    --cg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --cg-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --cg-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --cg-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);

    /* ===== Transitions ===== */
    --cg-transition-fast: 0.15s ease;
    --cg-transition-base: 0.3s ease;
    --cg-transition-slow: 0.5s ease;

    /* ===== Typography ===== */
    --cg-font-sans:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    --cg-font-mono: "JetBrains Mono", "Courier New", monospace;

    /* ===== Legacy Variable Aliases ===== */
    --bg-base: var(--cg-bg-base);
    --bg-surface: var(--cg-bg-surface);
    --bg-card: var(--cg-bg-surface);
    --bg-card-hover: var(--cg-bg-elevated);
    --border-subtle: var(--cg-border-subtle);
    --border-glow: var(--cg-focus-ring);
    --purple-400: var(--cg-text-1);
    --purple-500: var(--cg-accent-hover);
    --purple-600: var(--cg-text-2);
    --cyan-400: var(--cg-accent-dark);

    /* ===== Responsive Layout Tokens ===== */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 0px;
    --content-padding: clamp(12px, 2vw, 32px);
    --card-gap: clamp(12px, 1.5vw, 24px);

    /* ===== Font Sizing System ===== */
    --font-xs:   clamp(10px, 1.1vw, 12px);
    --font-sm:   clamp(12px, 1.2vw, 14px);
    --font-base: clamp(13px, 1.3vw, 16px);
    --font-lg:   clamp(16px, 1.8vw, 20px);
    --font-xl:   clamp(20px, 2.5vw, 28px);
    --font-2xl:  clamp(24px, 3vw, 36px);
}

/* ============================================================
   Usage Guidelines:
   - Always use var(--cg-*) in CSS — never hard-code hex values
   - For JS color resolution use getComputedStyle():
       const s = getComputedStyle(document.documentElement);
       const danger = s.getPropertyValue('--cg-danger').trim() || '#F87171';
   - WCAG AA minimum contrast ratios maintained on --cg-bg-base:
       --cg-text-1  15.2:1  (AAA)
       --cg-text-2   7.4:1  (AAA)
       --cg-text-3   4.6:1  (AA large text / decorative)
       --cg-accent   6.8:1  (AA)
       --cg-success  8.1:1  (AAA)
       --cg-danger   5.6:1  (AA)
       --cg-warning 10.2:1  (AAA)
   ============================================================ */

.brand-cyber {
  color: var(--cg-accent-dark, #3b82f6);        /* blue — match existing accent color token */
  font-weight: inherit;
  font-size: inherit;
}
.brand-guard {
  color: #FFFFFF;        /* white */
  font-weight: inherit;
  font-size: inherit;
}
.brand-name {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-weight: bold;
  letter-spacing: -0.5px;
}

/* ===== Responsive Scaling Media Queries ===== */

/* 22-inch monitors (1281px - 1536px) */
@media (max-width: 1536px) and (min-width: 1281px) {
  :root {
    --content-padding: 24px;
    --card-gap: 16px;
  }
}

/* 16-inch laptops (1025px - 1280px) */
@media (max-width: 1280px) and (min-width: 1025px) {
  :root {
    --content-padding: 16px;
    --card-gap: 12px;
  }
}

/* md and below (tablets) */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 240px; /* Sidebar drawer width when open on mobile/tablet */
  }
}

/* ===== Global Responsive Resets ===== */
html, body {
  overflow-x: hidden;
  width: 100%;
}

* {
  box-sizing: border-box;
}

/* Centralized responsive container structure */
.container, .wrapper, .page-wrapper {
  min-width: unset;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}