/* ============================================================
   MFX Parser — Matflixx dark theme tokens
   Reproduces the original matflixx.cloud look:
   Outfit font · dark navy/black diagonal gradient · orange accent.
   ============================================================ */

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

:root {
  /* Surfaces — a touch lighter navy so panels read clearly without glare */
  --backdrop:        #11102a;
  --panel:           rgba(255, 255, 255, 0.055);
  --panel-solid:     #1b1a34;
  --sub-panel:       rgba(255, 255, 255, 0.07);
  --inset:           rgba(0, 0, 0, 0.28);
  --row:             rgba(255, 255, 255, 0.05);
  --row-hover:       rgba(255, 255, 255, 0.10);

  /* Lines */
  --line-faint:      rgba(255, 255, 255, 0.07);
  --line:            rgba(255, 255, 255, 0.11);
  --line-strong:     rgba(255, 255, 255, 0.20);

  /* Ink (text) */
  --ink:             #FFFFFF;
  --ink-2:           #DADBE6;
  --ink-3:           #9ea0b6;
  --ink-4:           #71748c;

  /* Accent — light blue */
  --accent:          #5BAEF0;
  --accent-hover:    #79c0f7;
  --accent-soft:     rgba(91, 174, 240, 0.18);
  --accent-dot:      #5BAEF0;

  /* Secondary accent — periwinkle (chart bars) */
  --violet:          #8E8EFF;
  --violet-soft:     rgba(142, 142, 255, 0.20);

  /* Status tones (dark): done=green · running=orange · error=red · wait=amber · idle=grey */
  --st-done:         #4fd789;
  --st-done-bg:      rgba(79, 215, 137, 0.18);
  --st-running:      #FF9F2E;
  --st-running-bg:   rgba(255, 159, 46, 0.18);
  --st-error:        #ff6b6b;
  --st-error-bg:     rgba(255, 107, 107, 0.18);
  --st-wait:         #ffcf5c;
  --st-wait-bg:      rgba(255, 207, 92, 0.18);
  --st-idle:         #8a8ca0;
  --st-idle-bg:      rgba(138, 140, 160, 0.18);

  /* Tag tones — accent (info) stays light blue; status tones map to the colours above */
  --tag-neutral-bg:  var(--st-idle-bg);    --tag-neutral-dot: var(--st-idle);
  --tag-accent-bg:   var(--accent-soft);   --tag-accent-dot:  var(--accent);
  --tag-sage-bg:     var(--st-done-bg);    --tag-sage-dot:    var(--st-done);
  --tag-brick-bg:    var(--st-error-bg);   --tag-brick-dot:   var(--st-error);
  --tag-amber-bg:    var(--st-wait-bg);    --tag-amber-dot:   var(--st-wait);
  --tag-running-bg:  var(--st-running-bg); --tag-running-dot: var(--st-running);

  /* Shadows */
  --shadow-panel:    0 1px 2px rgba(0,0,0,0.35), 0 12px 30px -12px rgba(0,0,0,0.6);
  --shadow-sub:      0 1px 2px rgba(0,0,0,0.25);
  --shadow-modal:    0 1px 2px rgba(0,0,0,0.4), 0 28px 70px -16px rgba(0,0,0,0.75);
  --inner-glow:      inset 0 1px 0 rgba(255,255,255,0.05);
  --inner-glow-sub:  inset 0 1px 0 rgba(255,255,255,0.04);

  /* Glass (modals) */
  --glass-bg:   rgba(22, 20, 35, 0.88);
  --glass-edge: rgba(255, 255, 255, 0.10);

  /* Scrollbar */
  --scroll-thumb:   var(--accent);
  --scroll-thumb-h: var(--accent-hover);

  /* Radii */
  --r-tag:    999px;
  --r-input:  10px;
  --r-sub:    12px;
  --r-panel:  16px;

  /* Layout */
  --gap:        12px;
  --pad-panel:  20px;
  --pad-sub:    14px;
  --nav-h:      58px;

  /* Fonts (the original Outfit family).
     --f-mono historically rendered every small technical label ("Next …",
     tags, meta rows, axis labels, logs) in JetBrains Mono, which reads as
     mechanical. Those are UI text, not code -- they now use the soft Outfit
     family. Real monospace stays available via --f-code for the code editor,
     where alignment matters. */
  --f-ui:      'Outfit', system-ui, -apple-system, sans-serif;
  --f-mono:    'Outfit', system-ui, sans-serif;
  --f-code:    'JetBrains Mono', ui-monospace, monospace;
  --f-display: 'Outfit', system-ui, sans-serif;
  --f-num:     'Outfit', system-ui, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--f-ui);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, .app-backdrop {
  background: linear-gradient(to left bottom, #1a1844 0%, #161438 55%, #0f0e22 100%);
  background-color: #14122e;
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-h); }
::-webkit-scrollbar-track { background: transparent; }

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

[x-cloak] { display: none !important; }