/* =====================================================================
   CIVIC THEME  —  Step 1: foundation (palette + typography)
   ---------------------------------------------------------------------
   Additive override for Tappet. Loads AFTER tappet.css and only changes
   colors + fonts — no layout is touched yet. Remove the <link> to revert.

   INSTALL
     1. Save this file as:   tappet/static/css/civic-theme.css
     2. In templates/base_index.html, add this line immediately AFTER the
        existing tappet.css <link>:

          <link rel="stylesheet" href="{% static '/css/civic-theme.css' %}" />

     3. Hard-refresh (Cmd/Ctrl-Shift-R) to bust the CSS cache.
   ===================================================================== */

/* Fonts: IBM Plex Sans (UI), Newsreader (post titles), IBM Plex Mono (labels).
   'obida' is already loaded by tappet.css for the brand + headings. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

/* ---- Palette tokens -------------------------------------------------
   These override the :root custom properties in tappet.css. Because the
   app already draws from these variables, most colors update for free. */
:root {
    --bg-body: #f5f6f8;              /* app background            */
    --bg-secondary-color: #ffffff;  /* post / card surface       */

    --color-one: #1b1f26;           /* primary text (ink)        */
    --color-darkGrey: #3f454e;      /* secondary text            */
    --color-grey: #9aa0ab;          /* muted / meta text         */

    --color-primary: #566277;       /* accent (was gold) — muted slate */

    /* Buttons */
    --color-action: #566277;        /* primary action fill       */
    --color-submit: #566277;        /* submit fill               */
    --color-cancel: #ffffff;        /* cancel fill               */

    /* Status (softer, on-brand) */
    --color-success: #2f8f6b;
    --color-error:   #c0392b;
    --color-warning: #b6810b;
}

/* ---- Typography -----------------------------------------------------
   Body + UI in IBM Plex Sans; brand/headings stay in obida (from tappet.css). */
body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--color-one);
    background-color: var(--bg-body);
}

/* Post titles read as editorial (Newsreader serif). */
.post-title {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 600;
}

/* Links inherit ink, not browser blue. */
a { color: var(--color-one); }

/* Primary-action buttons: filled slate with white text.
   (--color-action / --color-submit are now slate, so set readable text.) */
.btn-action,
.btn-submit {
    color: #ffffff;
}
.btn-cancel {
    color: var(--color-darkGrey);
    border: 1px solid #d3d9e6;
}