/* RobertsFurz — Design Tokens
   Dark is the default. Light theme via [data-theme="light"]. */

:root {
  /* ── Surfaces (dark, default) ─────────────────────────── */
  --bg-base:      #0e1116;   /* deepest app background */
  --bg-surface:   #161b22;   /* sidebars, panels */
  --bg-elevated:  #1a212c;   /* cards, raised surfaces */
  --bg-hover:     #20283340; /* subtle hover wash */
  --bg-glass:     rgba(14, 17, 22, 0.62);
  --bg-scrim:     rgba(8, 10, 13, 0.72);

  --border:       #2a323d;
  --border-soft:  #222a34;
  --border-strong:#3a4452;

  /* ── Text ─────────────────────────────────────────────── */
  --text:         #e8eef5;
  --text-dim:     #9aa7b6;
  --text-muted:   #5f6a78;
  --text-inverse: #0e1116;

  /* ── Accent (vivid green) ─────────────────────────────── */
  --accent:       #22c55e;
  --accent-2:     #4ade80;
  --accent-deep:  #16a34a;
  --accent-grad:  linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
  --accent-soft:  rgba(34, 197, 94, 0.12);
  --accent-line:  rgba(34, 197, 94, 0.30);
  --accent-glow:  rgba(34, 197, 94, 0.45);
  --on-accent:    #07140b;

  /* ── Status ───────────────────────────────────────────── */
  --online:       #34d058;
  --offline:      #5f6a78;
  --ping-good:    #34d058;
  --ping-mid:     #f0b429;
  --ping-bad:     #ef4444;

  --danger:       #ef4444;
  --danger-soft:  rgba(239, 68, 68, 0.12);
  --danger-line:  rgba(239, 68, 68, 0.32);
  --warning:      #f0b429;
  --info:         #3b82f6;

  /* ── Radii ────────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ── Shadows / glows ──────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.40);
  --shadow-lg:  0 24px 60px rgba(0,0,0,0.55);
  --shadow-pop: 0 16px 48px rgba(0,0,0,0.50);
  --glow-accent: 0 0 0 1px rgba(34,197,94,0.30), 0 8px 26px rgba(34,197,94,0.28);
  --glow-accent-strong: 0 0 0 1px rgba(34,197,94,0.40), 0 10px 36px rgba(34,197,94,0.42);

  /* ── Type ─────────────────────────────────────────────── */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: 56px;
  --fs-h1: 38px;
  --fs-h2: 28px;
  --fs-h3: 21px;
  --fs-lg: 17px;
  --fs-base: 15px;
  --fs-sm: 13px;
  --fs-xs: 11.5px;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-base: 1.55;

  /* ── Motion ───────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  color-scheme: dark;
}

/* ── Light theme ───────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:      #eef1f4;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ffffff;
  --bg-hover:     #0e111608;
  --bg-glass:     rgba(255, 255, 255, 0.70);
  --bg-scrim:     rgba(30, 38, 48, 0.45);

  --border:       #e1e6ec;
  --border-soft:  #eceff3;
  --border-strong:#cdd5df;

  --text:         #131922;
  --text-dim:     #586271;
  --text-muted:   #95a0ad;
  --text-inverse: #ffffff;

  --accent-soft:  rgba(34, 197, 94, 0.14);
  --offline:      #aab3bf;
  --on-accent:    #07140b;

  --shadow-sm:  0 1px 2px rgba(20,28,38,0.06);
  --shadow-md:  0 10px 30px rgba(20,28,38,0.10);
  --shadow-lg:  0 28px 64px rgba(20,28,38,0.16);
  --shadow-pop: 0 16px 48px rgba(20,28,38,0.16);

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Scrollbars */
* { 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: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }