/* ════════════════════════════════════════
   BENCHMARK — DESIGN TOKENS + THEME
   Single source of truth for all design
   decisions. Never hard-code values that
   exist here.
════════════════════════════════════════ */

:root {

  /* ── BRAND COLOUR PALETTE ──────────────
     Earth tones: the "nature meets urban"
     palette that defines BenchMark's feel.
  ─────────────────────────────────────── */
  --bark:        #3d2b1f;    /* primary text */
  --bark-light:  #6b4c35;    /* secondary text */
  --moss:        #1f7d3e;    /* primary brand / CTA */
  --moss-light:  #2a9e50;    /* hover state */
  --cream:       #f5f0e8;    /* surface / sidebar bg */
  --parchment:   #ede5d4;    /* borders / dividers */
  --stone:       #c4b49a;    /* placeholder / inactive */
  --stone-dark:  #9a8a74;    /* muted text */
  --gold:        #c8a94a;    /* stars / achievements */
  --white:       #fdfaf5;    /* card / modal bg */
  --red:         #c0392b;    /* danger / reports */
  --red-light:   #e74c3c;    /* danger hover */
  --amber:       #e67e22;    /* warnings */

  /* ── SHADOWS ──────────────────────────── */
  --shadow:       rgba(61, 43, 31, 0.15);
  --shadow-deep:  rgba(61, 43, 31, 0.30);

  /* ── TYPE SCALE ───────────────────────────────────────────
     8 semantic sizes replace 26+ arbitrary values.
     Mapping from old → new:
       0.58–0.68rem  → --text-xs  (micro labels, badges)
       0.70–0.76rem  → --text-sm  (tags, metadata)
       0.78–0.85rem  → --text-base (body, descriptions)
       0.86–0.95rem  → --text-md  (card names, UI text)
       1.00–1.10rem  → --text-lg  (section headings)
       1.20–1.40rem  → --text-xl  (modal titles)
       1.50–2.20rem  → --text-2xl (profile names, display)
       3.00rem+      → --text-3xl / --text-4xl (hero counts)
  ──────────────────────────────────────────────────────────── */
  --text-2xs:  0.625rem;   /* 10px — badge rarity, tiny caps */
  --text-xs:   0.6875rem;  /* 11px — sub-labels, timestamps */
  --text-sm:   0.75rem;    /* 12px — tags, metadata, counts */
  --text-base: 0.875rem;   /* 14px — body text, descriptions */
  --text-md:   1rem;       /* 16px — card names, UI labels */
  --text-lg:   1.125rem;   /* 18px — section headings */
  --text-xl:   1.375rem;   /* 22px — modal titles */
  --text-2xl:  1.75rem;    /* 28px — profile names */
  --text-3xl:  3rem;       /* 48px — streak count */
  --text-4xl:  5rem;       /* 80px — mobile hero */

  /* ── FONT WEIGHTS ─────────────────────────────────────────
     4 clear steps. Remove 250 (non-standard, inconsistent)
     and the fuzzy gap between 500/600.
  ──────────────────────────────────────────────────────────── */
  --weight-normal:    400;  /* body text, descriptions */
  --weight-medium:    500;  /* UI text, subtle emphasis */
  --weight-semibold:  600;  /* card names, labels */
  --weight-bold:      700;  /* buttons, headings */
  --weight-extrabold: 800;  /* display text, counters */

  /* ── TYPOGRAPHY ───────────────────────── */
  --font-primary:  'Onest', sans-serif;
  --font-display:  'Onest', sans-serif;

  /* ── SPACING SCALE ────────────────────────────────────────
     9-step scale covers 100% of spacing needs.
     Use these everywhere. Never use raw px values for
     margin, padding, or gap.
  ──────────────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── BORDER RADIUS ────────────────────────────────────────
     5 semantic steps + full-pill alias.
     Map from old chaos: 8/10 → sm, 12/14 → md,
     16/18 → lg, 20/22/24 → xl, 99px → full
  ──────────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Legacy aliases (used in existing code, map to scale) */
  --radius:      var(--radius-lg);
  --radius-sm-legacy: var(--radius-sm);
  --radius-pill: var(--radius-full);
  --radius-card: var(--radius-xl);
  --radius-panel: var(--radius-xl);

  /* ── AVATAR SIZES ─────────────────────── */
  --avatar-xs:   24px;   /* leaderboard inline */
  --avatar-sm:   32px;   /* owner credit line */
  --avatar-md:   36px;   /* check-in list */
  --avatar-lg:   48px;   /* panel owner row */
  --avatar-xl:   72px;   /* edit profile page */
  --avatar-2xl:  80px;   /* special profiles */

  /* ── Z-INDEX SCALE ────────────────────────────────────────
     Centralised layer management. Never write z-index values
     anywhere else in the CSS.
  ──────────────────────────────────────────────────────────── */
  --z-base:     1;
  --z-sidebar:  10;
  --z-fab:      50;
  --z-overlay:  100;
  --z-modal:    200;
  --z-panel:    300;    /* mobile fullscreen panels */
  --z-sheet:    400;    /* bench bottom sheet */
  --z-toast:    500;
  --z-popup:    600;    /* achievement, reward popups */
  --z-nav:      700;    /* mobile bottom nav */
  --z-max:      999;

  /* ── TRANSITIONS ──────────────────────── */
  --transition-fast:    0.15s ease;
  --transition-base:    0.20s ease;
  --transition-slow:    0.30s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── BORDERS ──────────────────────────── */
  --border-divider: 1px solid var(--parchment);
  --border-card:    1.5px solid var(--parchment);

  /* ── SHADOW TOKENS ────────────────────── */
  --shadow-header:  0 1px 24px rgba(61, 43, 31, 0.08);
  --shadow-card:    0 8px 32px var(--shadow-deep);
  --shadow-panel:   -6px 0 32px var(--shadow-deep);

  /* ── OVERLAY SCRIMS ───────────────────── */
  --overlay-scrim:        rgba(0, 0, 0, 0.50);
  --overlay-scrim-strong: rgba(0, 0, 0, 0.55);
  --bark-overlay:         rgba(61, 43, 31, 0.50);
  --bark-shadow-deep:     rgba(61, 43, 31, 0.35);

  /* ── MOSS TINT SCALE ──────────────────── */
  --moss-t04:  rgba(31, 125, 62, 0.04);
  --moss-t08:  rgba(31, 125, 62, 0.08);
  --moss-t12:  rgba(31, 125, 62, 0.12);
  --moss-t15:  rgba(31, 125, 62, 0.15);
  --moss-t20:  rgba(31, 125, 62, 0.20);
  --moss-b30:  rgba(31, 125, 62, 0.30);
  --moss-b40:  rgba(31, 125, 62, 0.40);

  /* ── SEMANTIC COMPONENT TOKENS ────────────────────────────
     These map semantic intent to base palette values.
     Change component appearance by editing these, not the
     base colours above.
  ──────────────────────────────────────────────────────────── */

  /* Surfaces */
  --ui-surface-bg:         var(--white);
  --ui-surface-bg-soft:    var(--cream);
  --ui-surface-border:     var(--border-card);
  --ui-surface-radius:     var(--radius-md);
  --ui-surface-shadow:     none;

  /* Cards */
  --ui-card-bg:            var(--cream);
  --ui-card-border:        var(--border-divider);
  --ui-card-radius:        var(--radius-md);
  --ui-card-padding:       var(--space-4);

  /* Sheet / slide-in panels */
  --ui-sheet-bg:           var(--white);
  --ui-sheet-border:       var(--border-card);
  --ui-sheet-radius:       var(--radius-xl);
  --ui-sheet-shadow:       0 20px 60px var(--bark-shadow-deep);

  /* Modals */
  --ui-modal-bg:           var(--white);
  --ui-modal-border:       var(--border-card);
  --ui-modal-radius:       var(--radius-xl);
  --ui-modal-shadow:       0 20px 60px var(--bark-shadow-deep);
  --ui-modal-padding:      var(--space-8);

  /* Avatars */
  --ui-avatar-fallback-bg:  var(--moss);
  --ui-avatar-fallback-ink: var(--white);
  --ui-avatar-border:       0 solid transparent;

  /* Pills */
  --ui-pill-radius:     var(--radius-full);
  --ui-pill-py:         var(--space-1);
  --ui-pill-px:         var(--space-3);
  --ui-pill-font-size:  var(--text-sm);
  --ui-pill-weight:     var(--weight-bold);

  /* Buttons */
  --ui-button-bg:       var(--moss);
  --ui-button-bg-hover: var(--moss-light);
  --ui-button-border:   1.5px solid var(--moss);
  --ui-button-ink:      var(--white);
  --ui-button-radius:   var(--radius-md);
  --ui-button-py:       var(--space-2);
  --ui-button-px:       var(--space-4);

  /* Status semantics */
  --ui-status-neutral-bg:     var(--parchment);
  --ui-status-neutral-border: 1px solid var(--parchment);
  --ui-status-neutral-ink:    var(--stone-dark);

  --ui-status-success-bg:     var(--moss-t12);
  --ui-status-success-border: 1px solid var(--moss-b30);
  --ui-status-success-ink:    var(--moss);

  --ui-status-warning-bg:     var(--btn-warn-bg);
  --ui-status-warning-border: 1px solid var(--btn-warn-border);
  --ui-status-warning-ink:    var(--warn-pill-text);

  --ui-status-danger-bg:      var(--btn-danger-bg);
  --ui-status-danger-border:  1px solid var(--btn-danger-border);
  --ui-status-danger-ink:     var(--danger-accent);

  /* Button tints */
  --btn-ghost-bg:        rgba(61, 43, 31, 0.06);
  --btn-ghost-bg-hover:  rgba(61, 43, 31, 0.12);
  --btn-ghost-border:    rgba(61, 43, 31, 0.15);
  --btn-danger-bg:       #fde8e6;
  --btn-danger-border:   #f5c6c2;
  --btn-warn-bg:         #fef3e2;
  --btn-warn-border:     #fce0b0;

  /* Report states */
  --reported-bg:         #fde8e6;
  --reported-border:     #f5c6c2;

  /* Hover feedback */
  --reason-hover-bg:     #fef9f0;
  --reason-selected-bg:  #fef3e2;

  /* Danger palette */
  --danger-hover-bg:     #e53e3e;
  --danger-accent:       #e0513a;
  --danger-ink:          #7a1a0a;
  --danger-surface-soft: #fff8f7;

  /* Warning / gold palette */
  --warn-pill-bg:        #fff3cd;
  --warn-pill-text:      #7a5500;
  --gold-accent:         #f5a623;
  --gold-accent-deep:    #e8920a;
}


/* ════════════════════════════════════════
   DARK THEME
   Override only what changes. The CSS
   variable cascade handles the rest.
════════════════════════════════════════ */

[data-theme="dark"] {
  /* Base palette overrides */
  --bark:        rgba(255, 255, 255, 0.92);
  --bark-light:  rgba(255, 255, 255, 0.65);
  --moss:        #6bcb77;
  --moss-light:  #8de09a;
  --cream:       #0d1e35;
  --parchment:   rgba(255, 255, 255, 0.08);
  --stone:       rgba(255, 255, 255, 0.28);
  --stone-dark:  rgba(255, 255, 255, 0.50);
  --gold:        #e5c660;
  --white:       #0f2240;
  --red:         #e55a4d;
  --red-light:   #f06b5d;
  --amber:       #f0943e;

  /* Shadow overrides */
  --shadow:       rgba(0, 0, 0, 0.40);
  --shadow-deep:  rgba(0, 0, 0, 0.65);
  --bark-overlay:     rgba(0, 0, 0, 0.60);
  --bark-shadow-deep: rgba(0, 0, 0, 0.50);
  --shadow-header:    0 1px 24px rgba(0, 0, 0, 0.35);

  /* Moss tint overrides (different base colour in dark) */
  --moss-t04:  rgba(107, 203, 119, 0.04);
  --moss-t08:  rgba(107, 203, 119, 0.08);
  --moss-t12:  rgba(107, 203, 119, 0.12);
  --moss-t15:  rgba(107, 203, 119, 0.15);
  --moss-t20:  rgba(107, 203, 119, 0.20);
  --moss-b30:  rgba(107, 203, 119, 0.30);
  --moss-b40:  rgba(107, 203, 119, 0.40);

  /* Surface overrides */
  --ui-surface-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
  --ui-card-border: 1px solid rgba(255, 255, 255, 0.10);

  /* Status overrides */
  --ui-status-neutral-bg:     rgba(255, 255, 255, 0.08);
  --ui-status-neutral-border: 1px solid rgba(255, 255, 255, 0.16);

  /* Button tint overrides */
  --btn-ghost-bg:       rgba(255, 255, 255, 0.07);
  --btn-ghost-bg-hover: rgba(255, 255, 255, 0.13);
  --btn-ghost-border:   rgba(255, 255, 255, 0.18);
  --btn-danger-bg:      rgba(229, 90, 77, 0.15);
  --btn-danger-border:  rgba(229, 90, 77, 0.35);
  --btn-warn-bg:        rgba(240, 148, 62, 0.15);
  --btn-warn-border:    rgba(240, 148, 62, 0.35);

  /* Report state overrides */
  --reported-bg:     rgba(229, 90, 77, 0.12);
  --reported-border: rgba(229, 90, 77, 0.30);

  /* Hover feedback overrides */
  --reason-hover-bg:    rgba(240, 148, 62, 0.10);
  --reason-selected-bg: rgba(240, 148, 62, 0.18);
}


/* ════════════════════════════════════════
   DARK THEME — COMPONENT OVERRIDES
   Isolated component-level tweaks that
   can't be handled by variable cascade.
════════════════════════════════════════ */

/* Icon pairs (light/dark image swap) */
.icon-light { display: block; }
.icon-dark  { display: none; }

[data-theme="dark"] .icon-light { display: none; }
[data-theme="dark"] .icon-dark  { display: block; }

/* Header */
[data-theme="dark"] header {
  box-shadow: var(--shadow-header);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Sidebar */
[data-theme="dark"] .sidebar {
  border-right-color: rgba(255, 255, 255, 0.08);
}

/* Reported bench card */
[data-theme="dark"] .bench-card.reported {
  border-color: rgba(229, 90, 77, 0.35);
  background: rgba(229, 90, 77, 0.06);
}

/* Admin flagged row */
[data-theme="dark"] .admin-bench-row.flagged {
  border-color: rgba(229, 90, 77, 0.35);
  background: rgba(229, 90, 77, 0.08);
}

/* Profile dropdown */
[data-theme="dark"] .profile-dropdown {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Photo popup bar */
[data-theme="dark"] .photo-popup-bar {
  background: var(--cream);
}

/* Map popup */
[data-theme="dark"] .leaflet-popup-content-wrapper {
  background: var(--white) !important;
  color: var(--bark) !important;
}
[data-theme="dark"] .popup-name,
[data-theme="dark"] .popup-loc { color: var(--bark); }

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.20); }
[data-theme="dark"] ::-webkit-scrollbar-track  { background: transparent; }


/* ════════════════════════════════════════
   THEME TOGGLE SYSTEM
   Manages light/dark icon swap and
   button state via JS (theme.js).
════════════════════════════════════════ */

/* Theme toggle button — only appears inside profile modal */
.theme-toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1.5px solid var(--stone-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  cursor: pointer;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
  flex-shrink: 0;
  color: var(--bark);
  box-shadow: 0 1px 4px var(--shadow);
}

.theme-toggle-btn:hover {
  background: var(--parchment);
  border-color: var(--bark-light);
  transform: scale(1.1);
  box-shadow: 0 2px 8px var(--shadow);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}