@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap');

:root {
  /**
   * @section   Structural Layout Engine
   * @purpose   Controls spatial split, viewport limits, and responsive grid dimensions.
   * @usage     Consumed by primary layout wrappers, sidebars, and main content feeds.
   */
  --layout-grid: 40% 60%;
  --sidebar-position: sticky;
  --sidebar-height: 100vh;
  --sidebar-border: 1px solid var(--border);
  --content-alignment: flex-start;
  --content-max-width: 100%;
  --grid-columns-media: repeat(3, 1fr);

  /**
   * @section   Surface & Primitive Palette
   * @purpose   Defines base document canvas values, borders, and global transition physics.
   * @notes     High-contrast dark-mode primitives. Ensure surface contrast ratios meet 
   * WCAG AA standards against primary text tokens.
   */
  --bg: #0a0a09;
  --surface: #121210;
  --surface-hover: #1a1a17;
  --border: #22221f;
  --border-dashed: 1px dashed #22221f;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /**
   * @section   Semantic Typography Colors
   * @purpose   Establishes clear hierarchy levels across light text on dark backgrounds.
   * @usage     Apply systematically from primary (headings) to muted (metadata).
   */
  --text-primary: #e1ddd0;      
  --text-secondary: #f5f2e9;    
  --text-muted: #615e56;        
  --text-inverted: #0a0a09;     

  /**
   * @section   Context-Isolated Overrides
   * @purpose   Dedicated tokens for distinct widget contexts (Terminals, Cards) to prevent global cascade pollution.
   */
  --terminal-bg: #040404;
  --terminal-text: #90908a;
  --github-card-bg: #121210;
  --github-card-border: #22221f;
  --github-text-primary: #e1ddd0;
  --github-text-secondary: #615e56;

  /**
   * @section   System Status Engine
   * @purpose   Visual indicators for agent health, pipeline telemetry, and UI alerts.
   * @usage     Utilized by badges, pulses, status dots, and warning banners.
   */
  --accent: #c8b97a;
  --accent-hover:  #cbc8bd;
  --accent-dim: #7a7046;
  --red: #c45a3a;
  --green: #5a8f6b;
  --degraded-high: #cc7a43;
  --degraded-mid: #d49b53;
  --degraded-low: #8ba66b;
  --degraded-unmonitored: #7c7c7c;

  /**
   * @section   Border Profiles & Graphic Treatments
   * @purpose   Defines sharp brutalist corner properties and stroke styles.
   */
  --ink-line: 1px solid var(--border);
  --cell-corner: 0px;
  --comic-shadow: 0 0 0 transparent;
  --pulse-radius: 50%;

  /**
   * @section   Brand & Identity Typography
   * @purpose   Scale definitions for header branding and primary display labels.
   */
  --logo-text-transform: uppercase;
  --logo-font: 'DM Mono', monospace;
  --logo-size: 11px;
  --logo-spacing: 0.3em;

  --name-font: 'Cormorant Garamond', serif;
  --name-size: 72px;
  --name-stroke: none;
  --name-shadow: none;
  --name-style: italic;

  /**
   * @section   Widget & Control Metrics
   * @purpose   Standard dimensions and bounds for interactive controls and sub-bars.
   */
  --bar-height: 34px;
  --bar-radius: 2px;
  --bar-border: none;
  --bar-padding: 0px;
  --bar-padding-color: transparent;

  --tab-active-bg: var(--surface);
  --tab-active-text: var(--text-secondary);
  --tab-indicator-display: block;

  /**
   * @section   Theme Switcher Configuration
   * @purpose   Controls structural properties for theme switching components.
   */
  --switcher-layout: flex;          
  --switcher-shape: none;          
  --switcher-border: 2px solid var(--border);
  --switcher-font: inherit;      
}

/**
 * @section     Viewport Canvas Underlay
 * @purpose     Establishes the foundational aesthetic background for the page.
 */
.grid-bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 1;
  pointer-events: none;
  z-index: 99999;
}


/**
 * @section   Interface View Reveal
 * @purpose   Fades and translates primary container views into view during component mount.
 * @usage     Apply to top-level panel wrappers or page routes.
 */
@keyframes interfaceReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/**
 * @section   Accordion / Tray Expansion
 * @purpose   Reveals child elements such as node log trays, details drawers, or dropdown menus.
 * @usage     Apply to toggled container wrappers.
 */
@keyframes nodeExpandReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/**
 * @section   Tab Active Line Expansion
 * @purpose   Animates horizontal line indicators outward when a navigation tab becomes active.
 * @usage     Apply to active tab border or pseudo-element indicators.
 */
@keyframes tabLineExpand { from { transform: scaleX(0); } to { transform: scaleX(1); } }