/* ============================================================================
 * Save Your Chess — design tokens + Bootstrap theme overrides
 * "Analysis board": deep slate surfaces, board-green accent, monospace data.
 * This file loads AFTER bootstrap + site.css, so its overrides win.
 * ========================================================================== */

:root {
  /* Surfaces — warm-tinted slate, not flat black */
  --sc-bg: #0e1013;
  --sc-surface-1: #16191f; /* cards, panels, header */
  --sc-surface-2: #1d2129; /* inputs, raised controls */
  --sc-surface-3: #262b35; /* hover / active */
  --sc-border: #2b313c;
  --sc-border-soft: #21262f;

  /* Ink */
  --sc-text: #e6e8ec;
  --sc-muted: #98a1b0;
  --sc-faint: #6b7482;

  /* Board green — natural, not acid */
  --sc-accent: #46b26b;
  --sc-accent-hi: #57c07c;
  --sc-accent-lo: #2f915a;
  --sc-accent-ink: #08160d;

  /* Cream — echoes a board's light squares, used sparingly */
  --sc-cream: #e9e3d2;

  /* Semantic result colors */
  --sc-win: #46b26b;
  --sc-loss: #e0574f;
  --sc-draw: #8a93a3;

  /* Elevation */
  --sc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sc-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
  --sc-shadow-board: 0 10px 30px rgba(0, 0, 0, 0.55);

  /* Type */
  --sc-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla';
  --sc-font-display: 'Space Grotesk', system-ui, sans-serif, var(--sc-emoji);
  --sc-font-body: 'Inter', system-ui, -apple-system, sans-serif, var(--sc-emoji);
  --sc-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace, var(--sc-emoji);
}

/* ---- Map tokens onto Bootstrap's dark theme variables ------------------- */
[data-bs-theme='dark'],
:root,
[data-bs-theme='light'] {
  --bs-primary: var(--sc-accent);
  --bs-active: var(--sc-accent-lo);
  --bs-disabled: #3a5a48;
  --bs-primary-rgb: 70, 178, 107;
  --bs-link-color-rgb: 87, 192, 124;
  --bs-link-hover-color-rgb: 120, 210, 150;
}

[data-bs-theme='dark'] {
  --bs-body-bg: var(--sc-bg);
  --bs-body-color: var(--sc-text);
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: var(--sc-muted);
  --bs-tertiary-color: var(--sc-faint);

  /* Redefine "black" so .bg-black panels read as surface-1, not void */
  --bs-black: var(--sc-surface-1);
  --bs-black-rgb: 22, 25, 31;

  --bs-secondary-bg: var(--sc-surface-2);
  --bs-tertiary-bg: var(--sc-surface-1);

  --bs-border-color: var(--sc-border);
  --bs-border-color-translucent: var(--sc-border);
  --bs-border-radius: 0.6rem;
  --bs-border-radius-sm: 0.4rem;
  --bs-border-radius-lg: 0.9rem;

  --bs-body-font-family: var(--sc-font-body);
  --bs-body-font-size: 0.95rem;
  --bs-body-line-height: 1.55;

  /* Cards */
  --bs-card-bg: var(--sc-surface-1);
  --bs-card-border-color: var(--sc-border);
  --bs-card-cap-bg: var(--sc-surface-1);

  /* Forms */
  --bs-form-control-bg: var(--sc-surface-2);

  /* Links */
  --bs-link-color: var(--sc-accent-hi);
  --bs-link-hover-color: #86d6a4;
}

/* ---- Component-level Bootstrap tuning ----------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--sc-accent);
  --bs-btn-hover-bg: var(--sc-accent-hi);
  --bs-btn-hover-border-color: var(--sc-accent-hi);
  --bs-btn-border-color: var(--sc-accent);
  --bs-btn-color: #06210f;
  --bs-btn-hover-color: #06210f;
  --bs-btn-active-bg: var(--sc-accent-lo);
  --bs-btn-active-border-color: var(--sc-accent-lo);
  --bs-btn-disabled-bg: var(--bs-disabled);
  --bs-btn-disabled-border-color: var(--bs-disabled);
  --bs-btn-disabled-color: #0c2a17;
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--sc-accent-hi);
  --bs-btn-border-color: color-mix(in srgb, var(--sc-accent) 55%, transparent);
  --bs-btn-hover-bg: var(--sc-accent);
  --bs-btn-hover-color: #06210f;
  --bs-btn-hover-border-color: var(--sc-accent);
  --bs-btn-active-bg: var(--sc-accent);
  --bs-btn-active-color: #06210f;
  --bs-btn-active-border-color: var(--sc-accent);
  --bs-btn-disabled-color: var(--bs-disabled);
  --bs-btn-disabled-border-color: var(--bs-disabled);
  font-weight: 600;
}
.btn-secondary {
  --bs-btn-bg: var(--sc-surface-2);
  --bs-btn-border-color: var(--sc-border);
  --bs-btn-hover-bg: var(--sc-surface-3);
  --bs-btn-hover-border-color: var(--sc-accent);
  --bs-btn-active-bg: var(--sc-surface-3);
  --bs-btn-color: var(--sc-text);
  --bs-btn-hover-color: #fff;
}

.list-group {
  --bs-list-group-active-bg: var(--sc-accent);
  --bs-list-group-active-border-color: var(--sc-accent);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--sc-surface-2);
  --bs-dropdown-border-color: var(--sc-border);
  --bs-dropdown-link-active-bg: var(--sc-accent);
  --bs-dropdown-link-hover-bg: var(--sc-surface-3);
  --bs-dropdown-box-shadow: var(--sc-shadow-2);
  /* above .sticky-top (z-index: 1020), e.g. the sticky chessboard in the games list */
  z-index: 1025;
}

.modal {
  --bs-modal-bg: var(--sc-surface-1);
  --bs-modal-border-color: var(--sc-border);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-header-border-color: var(--sc-border-soft);
  --bs-modal-box-shadow: var(--sc-shadow-2);
}

.card {
  --bs-card-border-radius: var(--bs-border-radius-lg);
}

/* Header / footer share the deepest surface with a hairline seam */
.header {
  background-color: var(--sc-surface-1);
}
.footer {
  background-color: var(--sc-surface-1);
}

.cm-chessboard-wrapper {
  background-color: transparent;
}