@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* ==========================================================================
   REPS — feedback board theme
   Matches the app + repsworkout.com: iOS blue #007AFF, Anton display face,
   Inter body (Fider already ships it), flat surfaces, pill buttons.
   Page ids (#c-header, #p-home, #p-show-post, #p-roadmap) are used only
   where Fider's own rule is id-scoped and would otherwise win.

   WHERE THIS RUNS
   feedback.repsworkout.com → Admin → Advanced → Custom CSS. Fider stores the
   text verbatim in its own Postgres and serves it from /static/custom/<hash>.css
   AFTER every bundle — which is why equal-specificity overrides here win.
   This file is a COPY, not the deployed artifact: edit here, then paste the
   whole file into that textarea and Save. Nothing in the build deploys it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — Fider resolves every accent through --primary-color[-light|-dark]
   -------------------------------------------------------------------------- */
:root {
  --primary-color:       #007AFF;
  --primary-color-light: #B8DAFF;
  --primary-color-dark:  #0060DF;

  --reps-hed:   'Anton', 'Impact', sans-serif;
  --reps-paper: #F6F8FA;
  --reps-card:  #FFFFFF;
  --reps-line:  #E4E7EB;

  --reps-accent:     #007AFF;
  --reps-accent-rgb: 0, 122, 255;

  --reps-r-card:  16px;
  --reps-r-input: 12px;
}

body[data-theme=dark] {
  /* Lighter base in dark — Fider's own convention: primary doubles as link
     text on a near-black canvas and as a fill under dark button labels. */
  --primary-color:       #4DA6FF;
  --primary-color-light: #A6D2FF;
  --primary-color-dark:  #2C8CE8;

  --reps-paper: #0A0A0A;
  --reps-card:  #141414;
  --reps-line:  #262626;

  --reps-accent:     #4DA6FF;
  --reps-accent-rgb: 77, 166, 255;
}

/* Fider's blue ramp drives vote buttons, status badges and mentions.
   Retint it from indigo to the Reps iOS blue. */
body[data-theme=light] {
  --colors-blue-50:  #F0F7FF;
  --colors-blue-100: #DCEBFF;
  --colors-blue-200: #B8DAFF;
  --colors-blue-300: #8AC0FF;
  --colors-blue-400: #4DA6FF;
  --colors-blue-500: #007AFF;
  --colors-blue-600: #0060DF;
  --colors-blue-700: #0B4FA8;
  --colors-blue-800: #0A3A7A;
  --colors-blue-900: #06254D;
}

body[data-theme=dark] {
  /* Inverted ramp, same as Fider's own: 900 is the lightest step. */
  --colors-blue-50:  #0E2136;
  --colors-blue-100: #0E2136;
  --colors-blue-200: #06192B;
  --colors-blue-300: #00376B;
  --colors-blue-400: #0052B0;
  --colors-blue-500: #0A6FE0;
  --colors-blue-600: #2E90FF;
  --colors-blue-700: #66AFFF;
  --colors-blue-800: #A6D2FF;
  --colors-blue-900: #DCEBFF;
}

::selection {
  background: var(--reps-accent);
  color: #fff;
}

/* --------------------------------------------------------------------------
   2. Canvas
   -------------------------------------------------------------------------- */
body {
  background-color: var(--reps-paper);
}

#p-home,
#p-show-post,
#p-roadmap,
#p-roadmap-blank,
#p-roadmap-upsell {
  background-color: var(--reps-paper);
}

/* --------------------------------------------------------------------------
   3. Header — Anton wordmark on a flat bar
   -------------------------------------------------------------------------- */
#c-header {
  background-color: var(--reps-card);
  border-bottom: 1px solid var(--reps-line);
}

/* Fider clips the wordmark: it sets overflow:hidden on this h1 for long site
   names, and Anton's glyphs stand ~1.13em tall, so a line-height of 1 shaved
   the top of the R and the foot of the S. */
#c-header .c-header__brand h1 {
  overflow: visible;
  padding-right: 2px;
  font-family: var(--reps-hed);
  font-weight: 400;
  font-style: italic;
  font-size: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--reps-accent);
}

#c-header .c-header__nav-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. Surfaces — flat, 16px, hairline border instead of a drop shadow
   -------------------------------------------------------------------------- */
.c-posts-container__post,
.c-comment-input-card,
.c-votes-panel {
  border-radius: var(--reps-r-card);
  border: 1px solid var(--reps-line);
  box-shadow: none;
}

#p-home .p-home__add-idea-btn,
#p-show-post .p-show-post__post-card,
#p-show-post .c-comment-input-card {
  border-radius: var(--reps-r-card);
  border: 1px solid var(--reps-line);
  box-shadow: none;
}

body[data-theme=dark] .c-posts-container__post,
body[data-theme=dark] .c-comment-input-card,
body[data-theme=dark] #p-home .p-home__add-idea-btn,
body[data-theme=dark] #p-show-post .p-show-post__post-card,
body[data-theme=dark] #p-show-post .c-comment-input-card {
  background-color: var(--reps-card);
}

/* Hover lifts with an accent hairline, not a shadow — the app is flat. */
.c-posts-container__post-link:hover .c-posts-container__post,
#p-home .p-home__add-idea-btn:hover {
  box-shadow: none;
  border-color: var(--reps-accent);
}

.c-posts-container__post-title {
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Fider draws a 5px accent slab above the post action row — too loud at
   brand blue, and the app has no such rule. */
#p-show-post .p-show-post__actions {
  border-top: 1px solid var(--reps-line);
}

#p-show-post .p-show-post__title {
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* --------------------------------------------------------------------------
   5. Anton — reserved for the wordmark and section headings only.
   Post titles stay in Inter: they are user copy and must stay readable.
   -------------------------------------------------------------------------- */
#p-home .p-home__welcome-title,
#p-show-post .p-show-post__discussion-header,
.c-votes-panel__header,
.c-roadmap-column__header {
  font-family: var(--reps-hed);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.p-show-post__discussion-count,
.c-votes-panel__count-badge {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   6. Buttons — pill, flat, uppercase primary label (app t-button-label)
   -------------------------------------------------------------------------- */
.c-button {
  border-radius: 999px;
}

.c-button--primary {
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: none;
}

.c-post-filter-btn,
.c-post-sort-btn {
  border-radius: 999px;
  box-shadow: none;
}

.c-post-filter-btn:hover,
.c-post-sort-btn:hover {
  box-shadow: none;
  border-color: var(--reps-accent);
}

/* --------------------------------------------------------------------------
   7. Inputs — 12px radius, accent focus ring (Fider hard-codes an indigo one)
   -------------------------------------------------------------------------- */
.c-input,
.c-textarea,
.c-select,
.fider-tiptap-editor {
  border-radius: var(--reps-r-input);
}

.c-input:focus,
.c-textarea:focus {
  border-color: var(--reps-accent);
  box-shadow: 0 0 0 3px rgba(var(--reps-accent-rgb), 0.15);
}

/* --------------------------------------------------------------------------
   8. Status chips (roadmap columns, OPEN/PLANNED/STARTED badges) read their
   colour from Fider's hard-coded blue utilities, not from the vars above,
   so retint those to the same ramp.
   -------------------------------------------------------------------------- */
body[data-theme=light] .bg-blue-50            { background-color: #F0F7FF; }
body[data-theme=light] .bg-blue-100           { background-color: #DCEBFF; }
body[data-theme=light] .text-blue-200         { color: #B8DAFF; }
body[data-theme=light] .border-blue-200       { border-color: #B8DAFF; }
body[data-theme=light] .hover\:bg-blue-200:hover { background-color: #B8DAFF; }
body[data-theme=light] .border-blue-400       { border-color: #4DA6FF; }
body[data-theme=light] .border-blue-500       { border-color: #007AFF; }
body[data-theme=light] .text-blue-600         { color: #0060DF; }
body[data-theme=light] .text-blue-700         { color: #0B4FA8; }
body[data-theme=light] .text-blue-800         { color: #0A3A7A; }

body[data-theme=dark] .bg-blue-50             { background-color: #0E2136; }
body[data-theme=dark] .bg-blue-100            { background-color: #0E2136; }
body[data-theme=dark] .text-blue-200          { color: #06192B; }
body[data-theme=dark] .border-blue-200        { border-color: #06192B; }
body[data-theme=dark] .hover\:bg-blue-200:hover  { background-color: #06192B; }
body[data-theme=dark] .border-blue-400        { border-color: #0052B0; }
body[data-theme=dark] .border-blue-500        { border-color: #0A6FE0; }
body[data-theme=dark] .text-blue-600          { color: #2E90FF; }
body[data-theme=dark] .text-blue-700          { color: #66AFFF; }
body[data-theme=dark] .text-blue-800          { color: #A6D2FF; }