/* ===========================================================
   StringLane theme for Fider — feedback.stringlane.app
   Variable-driven: light is the default, dark overrides via
   Fider's theme hook. Single-level selectors only.
   =========================================================== */

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

/* ---- Light theme (default) ---- */
:root {
  --sl-bg:         #F3F6FA;
  --sl-surface:    #FFFFFF;
  --sl-surface-2:  #ECF0F7;
  --sl-line:       #D8DFE9;
  --sl-line-2:     #C4CEDB;
  --sl-ink:        #0F1B29;
  --sl-ink-2:      #475569;
  --sl-ink-3:      #8593A3;
  --sl-mint:       #009E76;
  --sl-mint-hover: #00876A;
  --sl-mint-ink:   #FFFFFF;
  --sl-mint-soft:  rgba(0, 158, 118, 0.12);
}

/* ---- Dark theme — covers Fider's likely dark-mode hooks ---- */
html.dark, body.dark, html[data-theme="dark"], [data-theme="dark"] {
  --sl-bg:         #0B0F14;
  --sl-surface:    #11161D;
  --sl-surface-2:  #161D26;
  --sl-line:       #1F2833;
  --sl-line-2:     #2A3441;
  --sl-ink:        #E6ECF2;
  --sl-ink-2:      #A7B4C2;
  --sl-ink-3:      #64727F;
  --sl-mint:       #00DFA8;
  --sl-mint-hover: #00C896;
  --sl-mint-ink:   #062118;
  --sl-mint-soft:  rgba(0, 223, 168, 0.12);
}

/* --- Base canvas --- */
body {
  background-color: var(--sl-bg);
  color: var(--sl-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* --- Headings --- */
h1, h2, h3, h4 {
  color: var(--sl-ink);
  letter-spacing: -0.2px;
}

/* --- Secondary / muted text --- */
p, small, .c-text--muted {
  color: var(--sl-ink-2);
}

/* --- Links --- */
a { color: var(--sl-mint); }
a:hover { color: var(--sl-mint-hover); }

/* --- Header / top navigation --- */
#header-container, header, .c-menu {
  background-color: var(--sl-surface);
  border-bottom: 1px solid var(--sl-line);
}

/* --- Cards, segments, post rows, comments --- */
.c-segment, .c-box, .c-post-list-item, .c-comment {
  background-color: var(--sl-surface);
  border: 1px solid var(--sl-line);
  border-radius: 8px;
}

/* --- Inputs & textareas --- */
input, textarea, select {
  background-color: var(--sl-surface-2);
  color: var(--sl-ink);
  border: 1px solid var(--sl-line-2);
  border-radius: 7px;
}
input::placeholder, textarea::placeholder {
  color: var(--sl-ink-3);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--sl-mint);
  outline: none;
}

/* --- Default / secondary buttons (must come BEFORE primary) --- */
.c-button {
  background-color: var(--sl-surface-2);
  color: var(--sl-ink);
  border: 1px solid var(--sl-line-2);
  border-radius: 5px;
}
.c-button:hover {
  border-color: var(--sl-mint);
  color: var(--sl-mint);
}

/* --- Primary buttons (after default, so these win) --- */
.c-button--primary {
  background-color: var(--sl-mint);
  color: var(--sl-mint-ink);
  border: 1px solid var(--sl-mint);
  font-weight: 600;
}
.c-button--primary:hover {
  background-color: var(--sl-mint-hover);
  border-color: var(--sl-mint-hover);
}

/* --- Vote counter --- */
.c-vote-counter {
  background-color: var(--sl-surface-2);
  border: 1px solid var(--sl-line-2);
  color: var(--sl-ink);
  border-radius: 7px;
}
.c-vote-counter--voted {
  background-color: var(--sl-mint-soft);
  border-color: var(--sl-mint);
  color: var(--sl-mint);
}

/* --- Status badges --- */
.c-status-label { border-radius: 3px; }

/* --- Admin settings nav: active item --- */
.c-list-item.is-active,
.c-list-item--active,
.c-menu-item.is-active,
.c-side-menu a.is-active,
a.is-active {
  color: var(--sl-mint);
  border-color: var(--sl-mint);
}

/* --- Admin settings nav: active item --- */
a[aria-current="page"] {
  color: var(--sl-mint) !important;
  border-color: var(--sl-mint) !important;
}