/* ============================================================
   easyrss — design tokens
   Dark, console-first. Compact. Signal-orange accent.
   Type: IBM Plex Sans (UI) + IBM Plex Mono (code/data).
   ============================================================ */

:root {
  /* --- Surfaces (cool-neutral, faint blue cast) --- */
  --bg-0: #0a0c0f;   /* page background */
  --bg-1: #111419;   /* raised panel / card */
  --bg-2: #171b21;   /* nested inset, row hover */
  --bg-3: #1e232b;   /* active / overlay */
  --bg-input: #0d1014;
  --bg-code: #0c0e12;

  /* --- Borders / hairlines --- */
  --border: #232830;      /* ~ rgba(255,255,255,.07) */
  --border-2: #2c333d;    /* stronger divider */
  --border-3: #3a424d;    /* input focus ring base */

  /* --- Text --- */
  --fg: #e6e8eb;     /* primary */
  --fg-2: #a7aeb8;   /* secondary */
  --fg-3: #717986;   /* muted / captions */
  --fg-4: #4d545e;   /* faint / placeholder / disabled */

  /* --- Accent: signal orange --- */
  --accent: #f76707;
  --accent-2: #ff8a3d;          /* hover / brighter */
  --accent-ink: #0a0c0f;        /* text on accent fill */
  --accent-soft: rgba(247, 103, 7, 0.12);
  --accent-line: rgba(247, 103, 7, 0.34);
  --accent-glow: rgba(247, 103, 7, 0.22);

  /* --- Status (data viz / state) --- */
  --green: #34c77b;
  --green-soft: rgba(52, 199, 123, 0.13);
  --amber: #f5a623;
  --amber-soft: rgba(245, 166, 35, 0.13);
  --red: #f0524d;
  --red-soft: rgba(240, 82, 77, 0.13);
  --blue: #4c8dff;
  --blue-soft: rgba(76, 141, 255, 0.13);
  --violet: #9b7dff;

  /* --- Typography --- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono",
    Menlo, Consolas, monospace;

  /* Type scale — compact. px values for predictability. */
  --t-display: 46px;
  --t-h1: 32px;
  --t-h2: 22px;
  --t-h3: 16px;
  --t-body: 14px;   /* compact base */
  --t-sm: 13px;
  --t-xs: 12px;
  --t-2xs: 11px;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  /* tracking */
  --track-tight: -0.02em;
  --track-flat: 0;
  --track-wide: 0.04em;
  --track-caps: 0.08em;

  /* --- Spacing (4px base) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* --- Radii (small = technical) --- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* --- Elevation (subtle on dark; rely on borders) --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 0 0 1px var(--accent-line), 0 6px 24px var(--accent-glow);

  /* --- Motion --- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 140ms;
}

/* ---------- base reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-2);
}
::selection {
  background: var(--accent-soft);
  color: var(--fg);
}
code,
pre,
kbd {
  font-family: var(--font-mono);
}
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--fg);
}

/* custom scrollbar — console feel */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--border-3);
  background-clip: content-box;
}

/* faint dotted-grid backdrop helper */
.grid-bg {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 0);
  background-size: 22px 22px;
}