/* ============================================================
   Design tokens — Light mode (default)
   ============================================================ */

:root {
  --color-bg: #f5f0eb;
  --color-bg-secondary: #ece6df;
  --color-text: #1a1a1a;
  --color-text-secondary: #6b6560;
  --color-border: #ddd6ce;
  --color-surface: #ffffff;
  --color-surface-raised: #faf7f4;
  --color-input: #ddd6ce;
  --color-ring: #3a9b68;
  --radius: 0.5rem;

  --color-accent-50: #f0faf4;
  --color-accent-100: #dbf2e3;
  --color-accent-200: #b9e5cb;
  --color-accent-300: #8ad3aa;
  --color-accent-400: #5bb985;
  --color-accent-500: #3a9b68;
  --color-accent-600: #2b7d53;
  --color-accent-700: #246444;
  --color-accent-800: #205038;
  --color-accent-900: #1c422f;
  --color-accent-950: #0d2519;

  --color-win: #2b7d53;
  --color-loss: #d94444;
}

/* ============================================================
   Design tokens — Dark mode
   ============================================================ */

.dark {
  --color-bg: #141414;
  --color-bg-secondary: #1c1c1c;
  --color-text: #e8e4e0;
  --color-text-secondary: #9a938c;
  --color-border: #2a2a2a;
  --color-surface: #1e1e1e;
  --color-surface-raised: #242424;
  --color-input: #2a2a2a;
  --color-ring: #5bb985;

  --color-win: #5bb985;
  --color-loss: #e06060;
}

/* ============================================================
   Base resets
   ============================================================ */

*,
*::before,
*::after {
  border-color: var(--color-border);
}

body {
  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Utilities
   ============================================================ */

.focus-ring:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-ring);
  border-radius: var(--radius);
}

:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

html,
body,
header,
footer,
nav,
main {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* ============================================================
   Page transition
   ============================================================ */

@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  animation: page-fade-in 0.25s ease-out;
}

/* ============================================================
   Tooltips
   ============================================================ */

.tooltip-trigger {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--color-text-secondary);
}

.tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: pre-line;
  width: max-content;
  max-width: 240px;
  z-index: 50;
}

/* ============================================================
   Other
   ============================================================ */

[x-cloak] {
  display: none !important;
}

/* ============================================================
   Query builder
   ============================================================ */

select {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239a938c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}