/* ============================================================
   Long Lost Gamers — theme
   Fuses Video.js v10 (warm cream #ebe4c1, pill shapes, Inter)
   with the gruvbox palette (warm-charcoal ink + accent set).
   ============================================================ */

:root {
  /* --- surfaces (videojs cream / gruvbox light) --- */
  --bg: #ebe4c1; /* page — videojs theme-color */
  --bg-deep: #e3dab2; /* recessed wells */
  --paper: #fbf4dc; /* cards / surfaces */
  --paper-2: #f4ecce; /* secondary surface */

  /* --- ink (gruvbox dark scale) --- */
  --ink: #282828; /* dark0 — primary text */
  --ink-2: #3c3836; /* dark1 */
  --ink-soft: #504945; /* dark2 */
  --ink-faint: #6b5d52; /* muted — darkened from gruvbox gray for AA on cream */
  --ink-ghost: #a89984; /* gray */

  /* --- lines --- */
  --line: #d6c9a0;
  --line-soft: #e0d4ab;
  --line-strong: #bdab82;

  /* --- gruvbox accents (light-faded variants) --- */
  --red: #cc241d;
  --red-bright: #9d0006;
  --green: #98971a;
  --green-bright: #79740e;
  --yellow: #d79921;
  --yellow-bright: #b57614;
  --blue: #458588;
  --blue-bright: #076678;
  --purple: #b16286;
  --purple-bright: #8f3f71;
  --aqua: #689d6a;
  --aqua-bright: #427b58;
  --orange: #d65d0e;
  --orange-bright: #af3a03;

  /* --- roles --- */
  --accent: var(--orange);
  --accent-bright: var(--orange-bright);
  --accent-ink: #fbf4dc;

  /* --- shape (videojs is very round) --- */
  --r-pill: 999px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  /* --- shadow --- */
  --shadow-sm: 0 1px 0 rgba(40, 40, 40, 0.04), 0 2px 6px rgba(60, 50, 30, 0.06);
  --shadow-md:
    0 2px 4px rgba(60, 50, 30, 0.06), 0 8px 24px rgba(60, 50, 30, 0.1);
  --shadow-lg:
    0 4px 8px rgba(60, 50, 30, 0.08), 0 20px 48px rgba(60, 50, 30, 0.16);
  --shadow-hard: 4px 4px 0 var(--ink);

  /* --- type --- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* ---- dark (gruvbox dark) variant, applied via [data-mode="dark"] ---- */
[data-mode="dark"] {
  --bg: #1d2021;
  --bg-deep: #141617;
  --paper: #282828;
  --paper-2: #32302f;

  --ink: #fbf1c7;
  --ink-2: #ebdbb2;
  --ink-soft: #d5c4a1;
  --ink-faint: #a89984;
  --ink-ghost: #7c6f64;

  --line: #3c3836;
  --line-soft: #32302f;
  --line-strong: #504945;

  --red: #fb4934;
  --green: #b8bb26;
  --yellow: #fabd2f;
  --blue: #83a598;
  --purple: #d3869b;
  --aqua: #8ec07c;
  --orange: #fe8019;
  --red-bright: #fb4934;
  --green-bright: #b8bb26;
  --yellow-bright: #fabd2f;
  --blue-bright: #83a598;
  --purple-bright: #d3869b;
  --aqua-bright: #8ec07c;
  --orange-bright: #fe8019;

  --accent: #d65d0e;
  --accent-bright: #af3a03;
  --accent-ink: #1d2021;

  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 20px 48px rgba(0, 0, 0, 0.5);
  --shadow-hard: 4px 4px 0 #000;
}

* {
  box-sizing: border-box;
}

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

.fonts-loading .app {
  visibility: hidden;
}

/* subtle paper grain on the page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: radial-gradient(
    rgba(120, 100, 60, 0.05) 1px,
    transparent 1px
  );
  background-size: 4px 4px;
}

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

a {
  color: inherit;
  text-decoration: none;
}

input,
button,
textarea {
  font-family: inherit;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-track {
  background: transparent;
}