/* ============================================================
   FIRAT GROUP // COMMAND SURFACE — Design Tokens
   v0.1 · Konya · 37.8746, 32.4932
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* ----------------------------------------------------------
     COLOR · SURFACE STACK (warmest near user)
     ---------------------------------------------------------- */
  --abis:      #05070A;   /* deepest void — outside the panels */
  --panel:     #0A0E13;   /* default panel fill */
  --elevated:  #10151C;   /* raised panel / modal / inner card */
  --grid:      #161D26;   /* grid line, divider, separator */
  --edge:      #1F2A36;   /* panel border, hairline frame */

  /* ----------------------------------------------------------
     COLOR · ACCENT (KILITLI — yalnızca bunlar)
     ---------------------------------------------------------- */
  --amber:     #FFB000;   /* TEK ana vurgu — CTA, active, brand */
  --amber-dim: #B07700;   /* amber pressed/hover-down state */
  --amber-glow: rgba(255, 176, 0, 0.18);

  --wire-cyan: #7CD5FF;   /* yalnızca: veri çizgileri, feed bağlantıları */
  --wire-dim:  rgba(124, 213, 255, 0.42);

  --phosphor:  #39FF88;   /* yalnızca: ONLINE / AKTİF */
  --phosphor-dim: rgba(57, 255, 136, 0.22);

  --alert:     #FF3355;   /* yalnızca: CRITICAL / DOWN / ANOMALY */
  --alert-dim: rgba(255, 51, 85, 0.20);

  /* ----------------------------------------------------------
     COLOR · TEXT
     ---------------------------------------------------------- */
  --bone:      #E6E9EE;   /* default body text */
  --bone-soft: #C7CCD4;   /* slightly recessed body */
  --ash:       #94A3B8;   /* muted — labels, secondary */
  --ash-deep:  #5B6776;   /* very muted — coords, stamps */

  /* ----------------------------------------------------------
     COLOR · SEMANTIC (alias to accents)
     ---------------------------------------------------------- */
  --fg-1: var(--bone);
  --fg-2: var(--bone-soft);
  --fg-3: var(--ash);
  --fg-4: var(--ash-deep);
  --fg-accent: var(--amber);

  --bg-1: var(--abis);
  --bg-2: var(--panel);
  --bg-3: var(--elevated);
  --bg-4: var(--grid);

  --border: var(--edge);
  --border-strong: #2A3947;

  --status-online: var(--phosphor);
  --status-warn:   var(--amber);
  --status-down:   var(--alert);
  --status-idle:   var(--ash-deep);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* TYPE SCALE — px-locked, no fluid */
  --t-display:   56px;   /* H1 hero — Space Grotesk 600 */
  --t-h1:        32px;   /* page section heading */
  --t-h2:        20px;   /* panel heading */
  --t-h3:        14px;   /* subpanel / label heading */
  --t-body:      13px;   /* body */
  --t-data:      12px;   /* tabular data */
  --t-meta:      11px;   /* coords, timestamps, status */
  --t-micro:     10px;   /* axis labels, crosshair tags */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-norm:  1.45;

  --tr-wider:   0.08em;  /* default UI tracking */
  --tr-widest:  0.16em;  /* uppercase eyebrows */

  /* ----------------------------------------------------------
     SPACING — 4px base, dense scale
     ---------------------------------------------------------- */
  --s-0:  0;
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  6px;
  --s-4:  8px;
  --s-5:  12px;
  --s-6:  16px;
  --s-7:  20px;
  --s-8:  24px;
  --s-9:  32px;
  --s-10: 48px;
  --s-11: 64px;

  /* ----------------------------------------------------------
     RADIUS — sharp. Max 2px.
     ---------------------------------------------------------- */
  --r-0: 0;
  --r-1: 1px;
  --r-2: 2px;        /* MAX — never go higher */

  /* ----------------------------------------------------------
     BORDER
     ---------------------------------------------------------- */
  --bw-hair:   1px;
  --bw-strong: 2px;

  /* ----------------------------------------------------------
     GRID — 48×48 background grid
     ---------------------------------------------------------- */
  --grid-size: 48px;
  --grid-line: rgba(22, 29, 38, 0.55);
  --grid-bg:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size);

  /* ----------------------------------------------------------
     MOTION — micro, meaningful, NEVER bouncy
     ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in:  cubic-bezier(.4, 0, .8, .2);
  --ease-linear: linear;

  --d-pulse:   1.2s;       /* status dot */
  --d-ticker:  40s;        /* ticker scroll */
  --d-scan:    8s;         /* scan-line sweep */
  --d-draw:    2.4s;       /* map connection draw */
  --d-prepend: 200ms;      /* log prepend */

  /* ----------------------------------------------------------
     SHADOW — minimal. Inner glow only on accent.
     ---------------------------------------------------------- */
  --shadow-none: none;
  --shadow-edge: 0 0 0 1px var(--edge);
  --shadow-glow-amber: 0 0 0 1px var(--amber), 0 0 12px var(--amber-glow);
  --shadow-glow-phosphor: 0 0 8px var(--phosphor-dim);

  /* ----------------------------------------------------------
     OVERLAYS
     ---------------------------------------------------------- */
  --scanline-opacity: 0.02;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */

html, body {
  background: var(--abis);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: var(--t-body);
  line-height: var(--lh-norm);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: var(--lh-tight);
}

h2 { font-size: var(--t-h1);  letter-spacing: var(--tr-wider); }
h3 { font-size: var(--t-h2);  letter-spacing: var(--tr-wider); }
h4 { font-size: var(--t-h3);  letter-spacing: var(--tr-widest); color: var(--ash); }

p  { font-family: var(--font-mono); font-size: var(--t-body); color: var(--bone-soft); margin: 0; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--t-data);
}

/* numbers force tabular */
.num, [data-num] { font-variant-numeric: tabular-nums; }

/* ============================================================
   UTILITY CLASSES — used in cards + UI kit
   ============================================================ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--ash);
}

.coord {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ash-deep);
  letter-spacing: var(--tr-wider);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ash);
}

/* status dot — pulse */
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse var(--d-pulse) ease-out infinite;
  vertical-align: middle;
}
.dot--online   { color: var(--phosphor); background: var(--phosphor); }
.dot--warn     { color: var(--amber);    background: var(--amber); }
.dot--down     { color: var(--alert);    background: var(--alert); }
.dot--idle     { color: var(--ash-deep); background: var(--ash-deep); animation: none; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 6px transparent; opacity: 0.6; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* panel */
.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-1);
  position: relative;
}
.panel--elevated { background: var(--elevated); }

/* panel header */
.panel-head {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ash);
}
.panel-head .title { color: var(--bone); }
.panel-head .sep { color: var(--ash-deep); }
.panel-head .tag-amber { color: var(--amber); }

/* crosshair corner marker */
.crosshair {
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
}
.crosshair::before, .crosshair::after {
  content: "";
  position: absolute;
  background: var(--amber);
}
.crosshair::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.crosshair::after  { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.crosshair--tl { top: -4px; left: -4px; }
.crosshair--tr { top: -4px; right: -4px; }
.crosshair--bl { bottom: -4px; left: -4px; }
.crosshair--br { bottom: -4px; right: -4px; }

/* button — primary amber, pressed = darker */
.btn {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--edge);
  padding: 8px 14px;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.btn:hover { border-color: var(--amber); color: var(--amber); }
.btn:active { background: var(--amber-glow); }

.btn--primary {
  background: var(--amber);
  color: var(--abis);
  border-color: var(--amber);
}
.btn--primary:hover { background: var(--amber); border-color: var(--amber); color: var(--abis); }
.btn--primary:active { background: var(--amber-dim); border-color: var(--amber-dim); }

.btn--ghost { background: transparent; color: var(--ash); }

/* scanline overlay */
.scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(230, 233, 238, 0.06) 2px,
    rgba(230, 233, 238, 0.06) 3px
  );
  mix-blend-mode: overlay;
  opacity: var(--scanline-opacity);
}

/* gridded background */
.gridbg {
  background-color: var(--abis);
  background-image: var(--grid-bg);
}