/* ============================================================================
   JimenezNOC — DARK FIBER design system
   Shared token sheet + base primitives for all pages. No build step.
   Concept: a near-black graphite console, monochrome ink-on-carbon, where amber
   (#FFB224) is the ONLY accent and means "needs you now". Green = status LEDs,
   red = overdue/broken, account identity = muted micro-dots. Dark is the default;
   light/medium remain as retuned fallbacks.
   ============================================================================ */

@font-face{
  font-family:'Inter var';
  src:url('/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono var';
  src:url('/fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight:100 800;font-style:normal;font-display:swap;
}

:root{
  --radius:10px; --radius-sm:7px;
  --font:'Inter var',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono var',"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  /* motion policy: two durations, transform/opacity only */
  --dur-fast:120ms; --ease-fast:cubic-bezier(.2,0,0,1);
  --dur-slow:240ms; --ease-slow:cubic-bezier(.32,.72,0,1);
}

/* DARK FIBER — the canonical theme (also the default when no data-theme is set) */
html,html[data-theme="dark"]{
  --bg:#0A0C0E; --surface:#101317; --surface-2:#171B20; --surface-3:#1E2329;
  --border:#21262C; --border-strong:#2E353D;
  --text:#E9ECEF; --text-dim:#A5AEB8; --text-faint:#626C77;
  --accent:#FFB224; --accent-soft:rgba(255,178,36,.12); --on-accent:#0A0C0E;
  --green:#46C486; --yellow:#FFB224; --red:#FF6369; --orange:#FF8A3D; --purple:#B49CF6; --blue:#6CA6FF;
  --shadow:none;
  --shadow-lg:0 16px 48px rgba(0,0,0,.55);
}

/* Light — retuned fallback (blue accent keeps text/link contrast on white) */
html[data-theme="light"]{
  --bg:#eef1f6; --surface:#fff; --surface-2:#f3f5f9; --surface-3:#e9edf4;
  --border:#e2e6ee; --border-strong:#cdd4e0;
  --text:#19212e; --text-dim:#5d6b80; --text-faint:#94a0b3;
  --accent:#2563eb; --accent-soft:rgba(37,99,235,.10); --on-accent:#fff;
  --green:#16a34a; --yellow:#ca8a04; --red:#dc2626; --orange:#ea580c; --purple:#7c3aed; --blue:#2563eb;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:0 12px 32px rgba(16,24,40,.16);
}

/* Medium — muted slate fallback */
html[data-theme="medium"]{
  --bg:#232a36; --surface:#2c3340; --surface-2:#333b4a; --surface-3:#3a4354;
  --border:#3d4655; --border-strong:#4b5568;
  --text:#e8ebf1; --text-dim:#9aa5b6; --text-faint:#6c7689;
  --accent:#5b9bff; --accent-soft:rgba(91,155,255,.14); --on-accent:#0b1220;
  --green:#3fb950; --yellow:#d6a020; --red:#f06b62; --orange:#f08247; --purple:#a78bfa; --blue:#5b9bff;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 12px 34px rgba(0,0,0,.45);
}

/* Custom scrollbars tuned to the surface tiers */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}
*::-webkit-scrollbar-track{background:transparent}

::selection{background:var(--accent-soft);color:var(--text)}

/* Amber focus ring for keyboard users only */
:focus-visible{outline:none;box-shadow:0 0 0 1px var(--bg),0 0 0 3px rgba(255,178,36,.7)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}