/* ============================================================
   MAIN.CSS — Variables, resets, layout foundation
   HPC Exascale Cluster Simulator
   ============================================================ */

/* --- Custom Properties --- */
:root {
  /* Core palette — VS Code dark theme inspired */
  --c-bg:           #0d1117;
  --c-bg-elevated:  #161b22;
  --c-bg-surface:   #1c2128;
  --c-bg-hover:     #21262d;
  --c-border:       #30363d;
  --c-border-focus: #58a6ff;

  /* Accent palette */
  --c-cyan:         #39d2e0;
  --c-cyan-dim:     #1a8a94;
  --c-magenta:      #d2a8ff;
  --c-magenta-dim:  #8957e5;
  --c-green:        #3fb950;
  --c-green-dim:    #238636;
  --c-yellow:       #d29922;
  --c-yellow-dim:   #9e6a03;
  --c-red:          #f85149;
  --c-red-dim:      #da3633;
  --c-orange:       #db6d28;
  --c-blue:         #58a6ff;

  /* Text */
  --c-text:         #c9d1d9;
  --c-text-muted:   #8b949e;
  --c-text-heading: #f0f6fc;
  --c-text-bright:  #ffffff;

  /* State colours */
  --st-pending:     var(--c-yellow);
  --st-running:     var(--c-cyan);
  --st-completing:  var(--c-magenta);
  --st-completed:   var(--c-green);
  --st-failed:      var(--c-red);

  /* Typography */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', Consolas, monospace;
  --font-size-xs:   0.6875rem;  /* 11px */
  --font-size-sm:   0.75rem;    /* 12px */
  --font-size-base: 0.8125rem;  /* 13px */
  --font-size-md:   0.875rem;   /* 14px */
  --font-size-lg:   1rem;       /* 16px */
  --font-size-xl:   1.25rem;    /* 20px */

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-8:  3rem;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow-cyan:    0 0 12px rgba(57,210,224,0.15);
  --shadow-glow-red:     0 0 12px rgba(248,81,73,0.2);
  --shadow-glow-magenta: 0 0 12px rgba(210,168,255,0.15);

  /* Transitions */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   120ms;
  --duration-normal: 250ms;
  --duration-slow:   500ms;
}

/* --- Reset --- */
*, *::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;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--c-text);
  background-color: var(--c-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Scanline overlay — CRT feel */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  color: var(--c-text-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

a {
  color: var(--c-cyan);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--c-text-bright); }

/* --- Focus --- */
:focus-visible {
  outline: 2px solid var(--c-border-focus);
  outline-offset: 2px;
}

/* --- Selection --- */
::selection {
  background: rgba(57, 210, 224, 0.25);
  color: var(--c-text-bright);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--c-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-text-muted);
}

/* --- Layout --- */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5);
}

/* Grid areas for potential expansion */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

@media (min-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr 320px;
  }
}

/* --- Utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  :root {
    --font-size-base: 0.75rem;
  }
  .main-content {
    padding: var(--sp-3);
  }
}