/* Global reset — brown-forward dark UI (Fuzzy Macro default accent); canvas colors in constants.js */

@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=JetBrains+Mono:wght@400;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Fuzzy Macro default brown */
  --primary: #ab8062;
  --primary-hover: #cd9975;
  --primary-rgb: 171, 128, 98;
  --primary-muted: rgba(var(--primary-rgb), 0.35);
  --accent-warm: #d4a574;
  --accent-warm-rgb: 212, 165, 116;
  --accent-honey: #f0d9a8;
  --accent-honey-rgb: 240, 217, 168;
  --accent-clay: #b87a6c;
  --accent-clay-rgb: 184, 122, 108;

  --background: #121212;
  --surface: #1a1a1a;
  --surface-hover: #2c2c2c;
  --surface-dim: #141414;
  --text-main: #e6e2de;
  --text-dim: #9c958c;
  --border: rgba(var(--primary-rgb), 0.28);
  --border-strong: #36322e;
  --textbox-bg: #2b2b2b;
  --drag-item-bg: #262626;
  --active-text: #ffffff;

  /* Legacy names — map to theme tokens */
  --accent-blue: var(--primary);
  --color-gray-100: var(--text-main);
  --color-gray-300: #6e6860;
  --color-gray-400: #524d47;
  --color-dark-100: var(--surface-hover);
  --color-dark-200: #252526;
  --color-dark-300: var(--surface);
  --color-dark-500: #0a0a0a;
  --color-blue-400: var(--primary);

  --shadow-medium: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-large: 0 8px 28px rgba(0, 0, 0, 0.55);
  --shadow-glow-primary: 0 0 28px rgba(var(--primary-rgb), 0.22);
}

html,
body {
  height: 100%;
}

body {
  font-family: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--text-main);
  padding: 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--background);
  background-image:
    radial-gradient(ellipse 110% 70% at 0% -15%, rgba(var(--primary-rgb), 0.2), transparent 52%),
    radial-gradient(ellipse 90% 55% at 100% 110%, rgba(var(--accent-warm-rgb), 0.14), transparent 48%),
    radial-gradient(ellipse 50% 40% at 88% 8%, rgba(var(--accent-clay-rgb), 0.08), transparent 45%),
    linear-gradient(165deg, #181512 0%, var(--background) 40%, #0f0e0c 100%);
  background-attachment: fixed;
}

section {
  background: transparent;
  border: none;
  border-radius: 3px;
  padding: 0;
}

section h2 {
  color: var(--text-main);
  margin-bottom: 15px;
  font-size: 1.3em;
  border-bottom: none;
  padding-bottom: 10px;
  background:
    linear-gradient(
        90deg,
        var(--primary) 0%,
        var(--accent-warm) 45%,
        var(--accent-honey) 100%
      )
      left bottom / 100% 2px no-repeat;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4a382e 0%, #7a5c48 45%, var(--primary) 100%);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5c4538 0%, #967056 40%, var(--primary-hover) 100%);
}