@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&display=swap');

/* Palette per project dataviz convention: light/dark aware, categorical + status roles. */
:root {
  color-scheme: light;
  --font-display: "Space Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
  --surface-1:      #fcfcfb;
  --surface-2:      #f2f1ee;
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --muted:          #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11, 11, 11, 0.10);

  --series-1: #4a63e0; /* electric blue-violet */
  --series-2: #0f9d5c; /* green */
  --series-3: #d6428f; /* magenta */
  --series-4: #c98200; /* amber */
  --series-5: #12a389; /* teal */
  --series-6: #dd5a2e; /* coral */
  --series-7: #7c3aed; /* violet */
  --series-8: #d6363f; /* red */

  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;

  /* Sequential blue ramp (steps 100/250/400/550 of the palette's sequential hue),
     used for the contribution-style heatmap: light -> dark = low -> high playtime. */
  --heat-1: #dde3fb;
  --heat-2: #a9b8f2;
  --heat-3: #6c7fe8;
  --heat-4: #4a63e0;

  /* A soft, color-matched glow used on hover for cards/avatars/CTAs — the
     signature "premium & moody" touch, reused everywhere rather than each
     component inventing its own shadow. */
  --glow-1: 0 8px 32px -8px color-mix(in oklab, var(--series-1) 45%, transparent);
  --glow-1-strong: 0 0 0 1px color-mix(in oklab, var(--series-1) 30%, transparent), 0 10px 40px -8px color-mix(in oklab, var(--series-1) 55%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1:      #14141f;
    --surface-2:      #1b1b29;
    --page:           linear-gradient(160deg, #07070d 0%, #0d0a1a 55%, #0a0e1c 100%);
    --text-primary:   #f5f5f9;
    --text-secondary: #b6b6c9;
    --muted:          #7c7c92;
    --gridline:       #27273b;
    --baseline:       #35354e;
    --border:         rgba(255, 255, 255, 0.10);

    --series-1: #6d84ff;
    --series-2: #2fd48a;
    --series-3: #ff6ba0;
    --series-4: #f0b854;
    --series-5: #45d9c0;
    --series-6: #ff8b5c;
    --series-7: #a487ff;
    --series-8: #ff5c6c;

    --heat-1: #171a30; --heat-2: #262d5c; --heat-3: #45509e; --heat-4: #6d84ff;
    --glow-1: 0 8px 32px -8px color-mix(in oklab, var(--series-1) 55%, transparent);
    --glow-1-strong: 0 0 0 1px color-mix(in oklab, var(--series-1) 35%, transparent), 0 10px 44px -6px color-mix(in oklab, var(--series-1) 65%, transparent);
  }
}

/* Explicit theme-mode overrides (from the Customize tab), taking priority
   over the system prefers-color-scheme so "Light"/"Dark" mean it regardless
   of OS setting. "Auto" leaves data-theme unset and falls back to the rules
   above. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #14141f;
  --surface-2:      #1b1b29;
  --page:           linear-gradient(160deg, #07070d 0%, #0d0a1a 55%, #0a0e1c 100%);
  --text-primary:   #f5f5f9;
  --text-secondary: #b6b6c9;
  --muted:          #7c7c92;
  --gridline:       #27273b;
  --baseline:       #35354e;
  --border:         rgba(255, 255, 255, 0.10);

  --series-1: #6d84ff;
  --series-2: #2fd48a;
  --series-3: #ff6ba0;
  --series-4: #f0b854;
  --series-5: #45d9c0;
  --series-6: #ff8b5c;
  --series-7: #a487ff;
  --series-8: #ff5c6c;

  --heat-1: #171a30; --heat-2: #262d5c; --heat-3: #45509e; --heat-4: #6d84ff;
  --glow-1: 0 8px 32px -8px color-mix(in oklab, var(--series-1) 55%, transparent);
  --glow-1-strong: 0 0 0 1px color-mix(in oklab, var(--series-1) 35%, transparent), 0 10px 44px -6px color-mix(in oklab, var(--series-1) 65%, transparent);
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --surface-2:      #f2f1ee;
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --muted:          #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11, 11, 11, 0.10);

  --series-1: #4a63e0;
  --series-2: #0f9d5c;
  --series-3: #d6428f;
  --series-4: #c98200;
  --series-5: #12a389;
  --series-6: #dd5a2e;
  --series-7: #7c3aed;
  --series-8: #d6363f;

  --heat-1: #dde3fb;
  --heat-2: #a9b8f2;
  --heat-3: #6c7fe8;
  --heat-4: #4a63e0;
}

/* Simple site-wide toggle button (theme-toggle.js) — every page except the
   dashboard itself, which has its own Auto/Light/Dark + preset controls in
   the Customize tab instead of this floating button. */
.theme-toggle-btn {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease;
}
.theme-toggle-btn:hover { transform: scale(1.08); }

/* Reduce-motion: respects the OS setting automatically, and can also be
   forced on from the Customize tab regardless of OS setting. */
.reduce-motion, .reduce-motion * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------
   Theme presets (Customize tab) — full coordinated palettes, not just a
   single accent swap: background gradient, surfaces, text, and series
   colors all shift together. Placed after the light/dark blocks above so
   a preset always wins at equal specificity regardless of Auto/Light/Dark.
   Each --page is a gradient (not a flat color) — body already does
   `background: var(--page)`, so this "just works" with no other changes,
   and .page-gradient-anim (toggled in JS alongside data-theme-preset)
   slowly drifts it for a subtle living-background effect.
--------------------------------------------------------------------- */
@keyframes pageGradientDrift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
.page-gradient-anim {
  background-size: 200% 200% !important;
  animation: pageGradientDrift 18s ease-in-out infinite;
}

/* Each named style below has both a light and a dark variant, resolved the
   same way the base Light/Dark toggle is: the bare [data-theme-preset="X"]
   selector is the light version (so it's what you get by default / in
   "Auto" mode on a light system); the dark version applies either via an
   explicit [data-theme="dark"] override or automatically when the system
   prefers dark and the mode isn't explicitly forced to "light" — mirroring
   the plain (non-preset) light/dark blocks earlier in this file. */

:root[data-theme-preset="midnight"] {
  color-scheme: light;
  --page: linear-gradient(160deg, #f3f0ff 0%, #e9e2ff 55%, #ede7ff 100%);
  --surface-1: #fbfaff;
  --surface-2: #f0ebfd;
  --text-primary: #241a3d;
  --text-secondary: #6a5a94;
  --muted: #9b8cc4;
  --gridline: #e0d6f7;
  --baseline: #c9b8ee;
  --border: rgba(110, 80, 200, 0.16);
  --series-1: #6c4fd6;
  --series-2: #2fae9a;
  --series-3: #d456b0;
  --series-4: #d69420;
  --series-5: #3aa892;
  --series-6: #d9663a;
  --series-7: #5540b8;
  --series-8: #cf3d5e;
  --heat-1: #ece4fb; --heat-2: #d0c0f2; --heat-3: #a084e0; --heat-4: #6c4fd6;
}
:root[data-theme-preset="midnight"][data-theme="dark"] {
  color-scheme: dark;
  --page: linear-gradient(160deg, #0a0a1a 0%, #14102a 60%, #1a0f2e 100%);
  --surface-1: #14121f;
  --surface-2: #1e1a30;
  --text-primary: #f0eeff;
  --text-secondary: #b8b0d9;
  --muted: #7a7398;
  --gridline: #2a2540;
  --baseline: #3a3355;
  --border: rgba(180, 160, 255, 0.16);
  --series-1: #8b7cf6;
  --series-2: #4fd6c0;
  --series-3: #e884d0;
  --series-4: #f0b854;
  --series-5: #5ecbb8;
  --series-6: #f0855e;
  --series-7: #6c5ce7;
  --series-8: #ef5b7d;
  --heat-1: #241f3d; --heat-2: #392f66; --heat-3: #5b4bb8; --heat-4: #8b7cf6;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme-preset="midnight"]:not([data-theme="light"]) {
    color-scheme: dark;
    --page: linear-gradient(160deg, #0a0a1a 0%, #14102a 60%, #1a0f2e 100%);
    --surface-1: #14121f;
    --surface-2: #1e1a30;
    --text-primary: #f0eeff;
    --text-secondary: #b8b0d9;
    --muted: #7a7398;
    --gridline: #2a2540;
    --baseline: #3a3355;
    --border: rgba(180, 160, 255, 0.16);
    --series-1: #8b7cf6;
    --series-2: #4fd6c0;
    --series-3: #e884d0;
    --series-4: #f0b854;
    --series-5: #5ecbb8;
    --series-6: #f0855e;
    --series-7: #6c5ce7;
    --series-8: #ef5b7d;
    --heat-1: #241f3d; --heat-2: #392f66; --heat-3: #5b4bb8; --heat-4: #8b7cf6;
  }
}

:root[data-theme-preset="sunset"] {
  color-scheme: light;
  --page: linear-gradient(160deg, #fff4ec 0%, #ffe6d4 55%, #ffede2 100%);
  --surface-1: #fffaf6;
  --surface-2: #ffe9d8;
  --text-primary: #401f10;
  --text-secondary: #8a5638;
  --muted: #c08f6e;
  --gridline: #ffdcc4;
  --baseline: #f0bb96;
  --border: rgba(210, 90, 40, 0.16);
  --series-1: #e05a30;
  --series-2: #d68a1a;
  --series-3: #d84a76;
  --series-4: #c99418;
  --series-5: #d87038;
  --series-6: #cf3a3a;
  --series-7: #a8406a;
  --series-8: #cc3350;
  --heat-1: #ffe6d4; --heat-2: #ffc49a; --heat-3: #f08850; --heat-4: #e05a30;
}
:root[data-theme-preset="sunset"][data-theme="dark"] {
  color-scheme: dark;
  --page: linear-gradient(160deg, #2a1414 0%, #3d1f14 55%, #33161e 100%);
  --surface-1: #24151a;
  --surface-2: #331e22;
  --text-primary: #fff0e8;
  --text-secondary: #e0b8a8;
  --muted: #a8806e;
  --gridline: #402828;
  --baseline: #543530;
  --border: rgba(255, 150, 100, 0.18);
  --series-1: #ff6b4a;
  --series-2: #ffb84a;
  --series-3: #ff6ba0;
  --series-4: #ffd166;
  --series-5: #ff9662;
  --series-6: #ff5252;
  --series-7: #c9598a;
  --series-8: #ff4d6a;
  --heat-1: #3d2018; --heat-2: #6b3520; --heat-3: #b8502a; --heat-4: #ff6b4a;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme-preset="sunset"]:not([data-theme="light"]) {
    color-scheme: dark;
    --page: linear-gradient(160deg, #2a1414 0%, #3d1f14 55%, #33161e 100%);
    --surface-1: #24151a;
    --surface-2: #331e22;
    --text-primary: #fff0e8;
    --text-secondary: #e0b8a8;
    --muted: #a8806e;
    --gridline: #402828;
    --baseline: #543530;
    --border: rgba(255, 150, 100, 0.18);
    --series-1: #ff6b4a;
    --series-2: #ffb84a;
    --series-3: #ff6ba0;
    --series-4: #ffd166;
    --series-5: #ff9662;
    --series-6: #ff5252;
    --series-7: #c9598a;
    --series-8: #ff4d6a;
    --heat-1: #3d2018; --heat-2: #6b3520; --heat-3: #b8502a; --heat-4: #ff6b4a;
  }
}

:root[data-theme-preset="neon"] {
  color-scheme: light;
  --page: linear-gradient(160deg, #fdf5ff 0%, #f5eeff 55%, #fff3fb 100%);
  --surface-1: #ffffff;
  --surface-2: #f6eefb;
  --text-primary: #1a0a24;
  --text-secondary: #7a5590;
  --muted: #b090c4;
  --gridline: #f0dff5;
  --baseline: #e0bfee;
  --border: rgba(220, 20, 180, 0.18);
  --series-1: #d61bb0;
  --series-2: #0aa8a0;
  --series-3: #d848c0;
  --series-4: #c9a010;
  --series-5: #12a8a0;
  --series-6: #d9662a;
  --series-7: #7c30d6;
  --series-8: #d92050;
  --heat-1: #f7e0f5; --heat-2: #ecb8ea; --heat-3: #dc6cd0; --heat-4: #d61bb0;
}
:root[data-theme-preset="neon"][data-theme="dark"] {
  color-scheme: dark;
  --page: linear-gradient(160deg, #05050f 0%, #0f0518 50%, #150a20 100%);
  --surface-1: #0d0b18;
  --surface-2: #171225;
  --text-primary: #f5f0ff;
  --text-secondary: #b8a8d9;
  --muted: #6e6390;
  --gridline: #241c3a;
  --baseline: #342a52;
  --border: rgba(255, 60, 220, 0.22);
  --series-1: #ff3cdc;
  --series-2: #33f0e0;
  --series-3: #ff70e8;
  --series-4: #f5e050;
  --series-5: #40e8c8;
  --series-6: #ff8040;
  --series-7: #a060ff;
  --series-8: #ff4070;
  --heat-1: #1a0a2e; --heat-2: #3d1a5c; --heat-3: #a020c0; --heat-4: #ff3cdc;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme-preset="neon"]:not([data-theme="light"]) {
    color-scheme: dark;
    --page: linear-gradient(160deg, #05050f 0%, #0f0518 50%, #150a20 100%);
    --surface-1: #0d0b18;
    --surface-2: #171225;
    --text-primary: #f5f0ff;
    --text-secondary: #b8a8d9;
    --muted: #6e6390;
    --gridline: #241c3a;
    --baseline: #342a52;
    --border: rgba(255, 60, 220, 0.22);
    --series-1: #ff3cdc;
    --series-2: #33f0e0;
    --series-3: #ff70e8;
    --series-4: #f5e050;
    --series-5: #40e8c8;
    --series-6: #ff8040;
    --series-7: #a060ff;
    --series-8: #ff4070;
    --heat-1: #1a0a2e; --heat-2: #3d1a5c; --heat-3: #a020c0; --heat-4: #ff3cdc;
  }
}

:root[data-theme-preset="forest"] {
  color-scheme: light;
  --page: linear-gradient(160deg, #f2f9f0 0%, #e6f3e0 55%, #eef8ea 100%);
  --surface-1: #fbfefa;
  --surface-2: #e6f2e1;
  --text-primary: #12280f;
  --text-secondary: #4a7048;
  --muted: #83a880;
  --gridline: #d9ecd4;
  --baseline: #b0d8a8;
  --border: rgba(30, 130, 60, 0.16);
  --series-1: #2a9a52;
  --series-2: #6a9a24;
  --series-3: #2a9a80;
  --series-4: #a08a1e;
  --series-5: #3a9a72;
  --series-6: #a8642a;
  --series-7: #4a8a3e;
  --series-8: #b04848;
  --heat-1: #dcf0d6; --heat-2: #aee0a0; --heat-3: #5cbf6e; --heat-4: #2a9a52;
}
:root[data-theme-preset="forest"][data-theme="dark"] {
  color-scheme: dark;
  --page: linear-gradient(160deg, #0d1710 0%, #14231a 55%, #10201c 100%);
  --surface-1: #101c14;
  --surface-2: #18291e;
  --text-primary: #eaf5ec;
  --text-secondary: #a8c9ae;
  --muted: #6e9078;
  --gridline: #223a2a;
  --baseline: #2e4c38;
  --border: rgba(120, 220, 150, 0.16);
  --series-1: #3ecf7e;
  --series-2: #8fd651;
  --series-3: #4ecfaa;
  --series-4: #d4c95a;
  --series-5: #5ecb9e;
  --series-6: #d9945a;
  --series-7: #6ba85e;
  --series-8: #e26b6b;
  --heat-1: #16281a; --heat-2: #1f4530; --heat-3: #2c7d4a; --heat-4: #3ecf7e;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme-preset="forest"]:not([data-theme="light"]) {
    color-scheme: dark;
    --page: linear-gradient(160deg, #0d1710 0%, #14231a 55%, #10201c 100%);
    --surface-1: #101c14;
    --surface-2: #18291e;
    --text-primary: #eaf5ec;
    --text-secondary: #a8c9ae;
    --muted: #6e9078;
    --gridline: #223a2a;
    --baseline: #2e4c38;
    --border: rgba(120, 220, 150, 0.16);
    --series-1: #3ecf7e;
    --series-2: #8fd651;
    --series-3: #4ecfaa;
    --series-4: #d4c95a;
    --series-5: #5ecb9e;
    --series-6: #d9945a;
    --series-7: #6ba85e;
    --series-8: #e26b6b;
    --heat-1: #16281a; --heat-2: #1f4530; --heat-3: #2c7d4a; --heat-4: #3ecf7e;
  }
}

:root[data-theme-preset="ocean"] {
  color-scheme: light;
  --page: linear-gradient(160deg, #eef9ff 0%, #ddf0fb 55%, #e9faff 100%);
  --surface-1: #fafeff;
  --surface-2: #ddf0f6;
  --text-primary: #082430;
  --text-secondary: #3d7488;
  --muted: #7cabbd;
  --gridline: #cfeaf2;
  --baseline: #9cd6ea;
  --border: rgba(20, 140, 180, 0.16);
  --series-1: #1490b0;
  --series-2: #1aa878;
  --series-3: #3878c9;
  --series-4: #b89020;
  --series-5: #1a9a8a;
  --series-6: #b06830;
  --series-7: #4058b0;
  --series-8: #b03858;
  --heat-1: #d4f0f7; --heat-2: #9ce0ee; --heat-3: #4cb8d8; --heat-4: #1490b0;
}
:root[data-theme-preset="ocean"][data-theme="dark"] {
  color-scheme: dark;
  --page: linear-gradient(160deg, #071620 0%, #0a232f 55%, #0a1c2c 100%);
  --surface-1: #0b1c26;
  --surface-2: #122a37;
  --text-primary: #e8f6ff;
  --text-secondary: #9fc9db;
  --muted: #628294;
  --gridline: #1c3947;
  --baseline: #274d5e;
  --border: rgba(80, 200, 230, 0.18);
  --series-1: #2fc7e8;
  --series-2: #4fe0a8;
  --series-3: #5fa8f0;
  --series-4: #e8c860;
  --series-5: #40d8c0;
  --series-6: #e88860;
  --series-7: #6080e0;
  --series-8: #e85f7a;
  --heat-1: #0f2a35; --heat-2: #164a5c; --heat-3: #1f8aa8; --heat-4: #2fc7e8;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme-preset="ocean"]:not([data-theme="light"]) {
    color-scheme: dark;
    --page: linear-gradient(160deg, #071620 0%, #0a232f 55%, #0a1c2c 100%);
    --surface-1: #0b1c26;
    --surface-2: #122a37;
    --text-primary: #e8f6ff;
    --text-secondary: #9fc9db;
    --muted: #628294;
    --gridline: #1c3947;
    --baseline: #274d5e;
    --border: rgba(80, 200, 230, 0.18);
    --series-1: #2fc7e8;
    --series-2: #4fe0a8;
    --series-3: #5fa8f0;
    --series-4: #e8c860;
    --series-5: #40d8c0;
    --series-6: #e88860;
    --series-7: #6080e0;
    --series-8: #e85f7a;
    --heat-1: #0f2a35; --heat-2: #164a5c; --heat-3: #1f8aa8; --heat-4: #2fc7e8;
  }
}

:root[data-theme-preset="rose"] {
  color-scheme: light;
  --page: linear-gradient(160deg, #fff0f4 0%, #ffe4ec 55%, #ffeaf2 100%);
  --surface-1: #fffafb;
  --surface-2: #ffeef2;
  --text-primary: #3a1521;
  --text-secondary: #8a5566;
  --muted: #b98a9a;
  --gridline: #f5d9e0;
  --baseline: #e8b8c8;
  --border: rgba(200, 60, 110, 0.16);
  --series-1: #e8447a;
  --series-2: #b8659a;
  --series-3: #f07890;
  --series-4: #e0a050;
  --series-5: #d9738f;
  --series-6: #e88a5a;
  --series-7: #a860c0;
  --series-8: #d94858;
  --heat-1: #fbdce6; --heat-2: #f3aec4; --heat-3: #e8709a; --heat-4: #e8447a;
}
:root[data-theme-preset="rose"][data-theme="dark"] {
  color-scheme: dark;
  --page: linear-gradient(160deg, #1a0810 0%, #2a0f1c 55%, #200a16 100%);
  --surface-1: #180810;
  --surface-2: #241018;
  --text-primary: #ffe8f0;
  --text-secondary: #d9a0b8;
  --muted: #93607a;
  --gridline: #3a1826;
  --baseline: #4d2032;
  --border: rgba(255, 100, 150, 0.2);
  --series-1: #ff5c94;
  --series-2: #c084c9;
  --series-3: #ff85a8;
  --series-4: #e8a850;
  --series-5: #d074b0;
  --series-6: #f0805a;
  --series-7: #a878e0;
  --series-8: #ff5060;
  --heat-1: #3a1826; --heat-2: #6b2440; --heat-3: #a8386c; --heat-4: #ff5c94;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme-preset="rose"]:not([data-theme="light"]) {
    color-scheme: dark;
    --page: linear-gradient(160deg, #1a0810 0%, #2a0f1c 55%, #200a16 100%);
    --surface-1: #180810;
    --surface-2: #241018;
    --text-primary: #ffe8f0;
    --text-secondary: #d9a0b8;
    --muted: #93607a;
    --gridline: #3a1826;
    --baseline: #4d2032;
    --border: rgba(255, 100, 150, 0.2);
    --series-1: #ff5c94;
    --series-2: #c084c9;
    --series-3: #ff85a8;
    --series-4: #e8a850;
    --series-5: #d074b0;
    --series-6: #f0805a;
    --series-7: #a878e0;
    --series-8: #ff5060;
    --heat-1: #3a1826; --heat-2: #6b2440; --heat-3: #a8386c; --heat-4: #ff5c94;
  }
}