/* Terminal Cyan Theme */

:root {
  /* Primary cyan/teal palette */
  --terminal-primary: #22d3ee;
  --terminal-secondary: #06b6d4;
  --terminal-dim: #0891b2;
  --terminal-cyan-700: #0e7490;
  --terminal-cyan-300: #67e8f9;
  --terminal-glow: rgba(34, 211, 238, 0.4);

  /* Border hierarchy */
  --terminal-border: rgba(34, 211, 238, 0.3);
  --terminal-border-subtle: rgba(34, 211, 238, 0.15);
  --terminal-border-hover: rgba(34, 211, 238, 0.5);
  --terminal-glow-subtle: rgba(34, 211, 238, 0.15);

  /* Typography — font families */
  --terminal-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --terminal-font-mono: 'JetBrains Mono', 'Space Mono', monospace;

  /* Typography — type scale */
  --fs-micro: 0.5rem;     /*  8px — avatar initials, messaging micro labels */
  --fs-2xs: 0.625rem;     /* 10px — nav labels, badge counts, icon text */
  --fs-xs: 0.75rem;       /* 12px — labels, table headers, help text */
  --fs-sm: 0.8125rem;     /* 13px — table data, messaging content */
  --fs-base: 0.875rem;    /* 14px — body text, buttons, form inputs */
  --fs-md: 1rem;          /* 16px — nav items, section text, rich text */
  --fs-lg: 1.125rem;      /* 18px — card names, modal titles */
  --fs-xl: 1.25rem;       /* 20px — section titles, stat values */
  --fs-2xl: 1.5rem;       /* 24px — nav title, header title */
  --fs-3xl: 1.75rem;      /* 28px — dashboard stat values */
  --fs-4xl: 2rem;         /* 32px — page titles */
  --fs-5xl: 2.5rem;       /* 40px — hero stat values */
  --fs-display: 3rem;     /* 48px — hero amounts, invoice balance */

  /* Backgrounds */
  --terminal-bg: #020617;
  --terminal-bg-light: #0f172a;
  --terminal-bg-mid: #0a0f1a;

  /* Text — contrast ratios vs --terminal-bg (#020617)
     Primary:   --terminal-text       18.4:1  (headings, body)
     Light:     --terminal-text-light  16.4:1  (emphasized secondary)
     Medium:    --terminal-text-medium  13.6:1  (standard secondary)
     Dim:       --terminal-text-dim     7.9:1  (labels, captions)
     Muted:     --terminal-text-muted   4.9:1  (AA — tertiary, help text)
     Faint:     --terminal-text-faint   3.7:1  (AA large — decorative, icons) */
  --terminal-text: #f1f5f9;
  --terminal-text-dim: #94a3b8;
  --terminal-text-muted: #6e7f94;
  --terminal-text-faint: #566b80;
  --terminal-text-light: #e2e8f0;
  --terminal-text-medium: #cbd5e1;
  --terminal-slate-700: #334155;
  --terminal-slate-800: #1e293b;

  /* Success (emerald) */
  --terminal-success: #10b981;
  --terminal-success-text: #34d399;

  /* Warning (amber) */
  --terminal-warning: #f59e0b;
  --terminal-warning-text: #fbbf24;
  --terminal-warning-strong: #fef3c7;
  --terminal-amber-700: #d97706;

  /* Error/danger (rose/red) */
  --terminal-error: #f43f5e;
  --terminal-error-text: #fb7185;
  --terminal-error-light: #fca5a5;
  --terminal-rose-800: #be123c;
  --terminal-rose-700: #e11d48;
  --terminal-red-500: #ef4444;
  --terminal-red-400: #f87171;
  --terminal-red-700: #dc2626;
  --terminal-red-800: #b91c1c;

  /* Accent (purple) */
  --terminal-purple: #a855f7;

  /* Utility */
  --terminal-zinc-500: #71717a;
  --terminal-indigo-950: #1e1b4b;

  /* Z-index scale */
  --z-skip-link: -1;
  --z-vignette: 50;
  --z-content: 51;
  --z-mobile-backdrop: 99;
  --z-nav: 100;
  --z-header: 101;
  --z-turbo-bar: 102;
  --z-dropdown: 1000;
  --z-scanlines: 9999;
  --z-skip-link-focus: 10000;
}

/* Base terminal styles */
body.terminal-theme {
  font-family: var(--terminal-font-body);
  background: linear-gradient(135deg, var(--terminal-bg) 0%, var(--terminal-bg-mid) 50%, var(--terminal-bg-light) 100%);
  background-attachment: fixed;
  color: var(--terminal-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* CRT Scanline Effect */
body.terminal-theme::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(34, 211, 238, 0.015) 0px,
    transparent 1px,
    transparent 2px,
    rgba(34, 211, 238, 0.015) 3px
  );
  pointer-events: none;
  z-index: var(--z-scanlines);
  animation: scanlines 8s linear infinite;
}

@keyframes scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(10px); }
}

/* Vignette */
body.terminal-theme::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, transparent 65%, rgba(2, 6, 23, 0.3) 100%);
  pointer-events: none;
  z-index: var(--z-vignette);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.terminal-fade-in {
  animation: fadeInUp 0.6s ease-out backwards;
}

.terminal-delay-1 { animation-delay: 0.1s; }
.terminal-delay-2 { animation-delay: 0.2s; }
.terminal-delay-3 { animation-delay: 0.3s; }
.terminal-delay-4 { animation-delay: 0.4s; }
.terminal-delay-5 { animation-delay: 0.5s; }
.terminal-delay-6 { animation-delay: 0.6s; }
.terminal-delay-7 { animation-delay: 0.7s; }


/* Skip to Content Link */
.terminal-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--z-skip-link);
  color: var(--terminal-primary);
  background: var(--terminal-bg);
  border: 2px solid var(--terminal-primary);
  padding: 0.75rem 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-base);
  text-decoration: none;
  letter-spacing: 0.05em;
}

.terminal-skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  overflow: visible;
  z-index: var(--z-skip-link-focus);
  box-shadow: 0 0 20px var(--terminal-glow);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  body.terminal-theme::before {
    animation: none;
  }

  body.terminal-theme::after {
    display: none;
  }

  .terminal-nav-header::before,
  .terminal-app-header::before {
    animation: none;
  }

  .terminal-header-impersonation {
    animation: none;
  }

  .terminal-fade-in {
    animation: none;
    opacity: 1;
  }

  .terminal-badge-warning {
    animation: none;
  }

  .terminal-progress-bar::after {
    animation: none;
  }
}

@media print {
  /* Hide chrome */
  .terminal-app-header,
  .terminal-nav,
  .mobile-nav-backdrop,
  .mobile-nav-hamburger,
  .terminal-flash,
  .terminal-impersonation-banner,
  .terminal-header-impersonation {
    display: none !important;
  }

  /* Remove CRT effects */
  body.terminal-theme::before,
  body.terminal-theme::after {
    display: none !important;
  }

  /* Light background, dark text */
  body.terminal-theme {
    background: #fff !important;
    color: #000 !important;
  }

  /* Reset main content positioning */
  .terminal-main {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  /* Clean panels */
  .terminal-panel {
    border: 1px solid #ccc !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .terminal-panel-header {
    background: #f5f5f5 !important;
    color: #000 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #ccc !important;
    text-shadow: none !important;
  }

  .terminal-panel-content {
    color: #000 !important;
  }

  /* Headers */
  .terminal-header {
    border: 1px solid #ccc !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .terminal-header::before {
    display: none !important;
  }

  .terminal-page-title {
    color: #000 !important;
    text-shadow: none !important;
  }

  .terminal-page-subtitle {
    color: #666 !important;
  }

  /* Tables */
  .terminal-table td,
  .terminal-table th {
    color: #000 !important;
    border-color: #ccc !important;
  }

  .terminal-table thead {
    background: #f5f5f5 !important;
    border-color: #ccc !important;
  }

  .terminal-table tbody tr:hover {
    background: none !important;
    box-shadow: none !important;
  }

  /* Badges — visible borders for print */
  .terminal-badge {
    color: #000 !important;
    background: #f5f5f5 !important;
    border: 1px solid #999 !important;
  }

  /* Links */
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* Hide action buttons in print */
  .terminal-btn,
  .terminal-back-link {
    display: none !important;
  }

  /* Stat cards */
  .terminal-stat-card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }

  .terminal-stat-card:hover {
    transform: none !important;
  }

  .terminal-stat-value {
    color: #000 !important;
    text-shadow: none !important;
  }

  .terminal-stat-label {
    color: #666 !important;
  }
}