/* SupportVA theme: the legacy portal's look, ported onto the platform.
 *
 * This is the client theme hook described in the platform's own theme.css --
 * an overlay at clients/supportva/static/theme.css shadowing the (empty)
 * platform file, loaded by both login.html and dashboard.html.
 *
 * It is deliberately a *token* overlay rather than a fork of dashboard.css.
 * The platform styles everything through the custom properties in
 * dashboard.css :root, so repointing those carries the whole portal -- and
 * unlike a fork, it keeps receiving platform fixes instead of drifting and
 * needing overlay-drift.sh to referee. The only non-token rules below are the
 * font bindings, which have nowhere else to live.
 *
 * Palette is the legacy portal's, which is itself the public site's: warm
 * paper ground, deep navy ink, lavender and mint accents.
 */

/* Self-hosted, same-origin. The portals run a CSP that blocks CDN font hosts,
   so these are served from the client overlay rather than fetched. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- ground and ink ------------------------------------------------- */
  /* Platform ships a green/sage system; SupportVA is navy on warm paper. */
  --ink: #181050;
  --text: #494272;
  --muted: #494272;
  --cream: #faf8f3;
  --paper: #faf8f3;
  --white: #ffffff;
  --line: #e3e0f4;
  --line-strong: rgba(24, 16, 80, 0.22);

  /* The platform names its darkest tones green-*; they are structural (sidebar,
     headings, primary buttons), so they are repointed rather than left green. */
  --green-900: #140054;
  --green-800: #241370;
  --green-700: #0e7466;
  --sage-100: #faf8f3;
  --sage-200: #edebfa;  /* lavender wash -- hover fills, chips */
  --sage-300: #d9d5f0;

  --sidebar: #140054;
  --sidebar-soft: #241370;

  /* --- accents -------------------------------------------------------- */
  /* --mint-deep from the legacy palette: the mint itself (#62e4d3) fails
     contrast as text, so the accessible deep variant is what --teal/--green
     resolve to and the bright mint stays for fills only. */
  --teal: #0e7466;
  --green: #0e7466;
  --gold: #b99a52;
  --amber: #b99a52;
  --blue: #5f7f96;
  --coral: #9f1f39;   /* legacy --danger */

  /* --- charts --------------------------------------------------------- */
  --chart-1: #241370;
  --chart-2: #0e7466;
  --chart-3: #9f1f39;
  --chart-4: #5f7f96;
  --chart-5: #7a62a8;
  --chart-6: #62e4d3;
  --chart-grid: rgba(24, 16, 80, 0.11);
  --chart-text: #494272;

  /* --- depth ---------------------------------------------------------- */
  /* Legacy shadows are two-layer: a tight contact shadow plus a wide soft one.
     That is what gives the cards their lift rather than a single blur. */
  --shadow: 0 2px 6px rgba(24, 16, 80, 0.06), 0 18px 44px rgba(24, 16, 80, 0.13);
  --soft-shadow: 0 1px 2px rgba(24, 16, 80, 0.05), 0 4px 14px rgba(24, 16, 80, 0.06);

  /* Body text. The platform sets its stack on :root, so this is the one place
     that has to win for the whole portal to change typeface. */
  font-family: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Headings. The platform reaches for Georgia in a couple of dozen places;
   Fraunces is the legacy display face and the reason the old portal reads as
   editorial rather than administrative. Listed by role rather than with a
   blanket rule so control labels and table headers stay in Inter. */
h1,
h2,
h3,
.page-title,
.panel-title,
.card-title,
.stat-card .value,
.login-panel h1 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  letter-spacing: -0.01em;
}

/* --- dark theme --------------------------------------------------------
   The platform's own dark block is html[data-theme="dark"], and its overrides
   would otherwise beat the :root values above and drag the green system back
   in. Same palette, inverted: navy deepens to near-black, lavender becomes the
   light ink. */
html[data-theme="dark"] {
  --ink: #f1effa;
  --text: #d6d2ea;
  --muted: #a49dc4;
  --cream: #0d0824;
  --paper: #140d33;
  --white: #1b1340;
  --line: rgba(226, 222, 250, 0.16);
  --line-strong: rgba(226, 222, 250, 0.3);

  --green-900: #0d0824;
  --green-800: #241370;
  --green-700: #62e4d3;
  --sage-100: #1b1340;
  --sage-200: #251b52;
  --sage-300: #342765;

  --sidebar: #0d0824;
  --sidebar-soft: #1b1340;

  /* Mint reads well on dark, so the accent flips to the bright variant here --
     the deep #0e7466 that carries contrast on paper goes muddy on navy. */
  --teal: #62e4d3;
  --green: #62e4d3;
  --chart-1: #8e7ce0;
  --chart-2: #62e4d3;
  --chart-6: #241370;
  --chart-grid: rgba(226, 222, 250, 0.12);
  --chart-text: #a49dc4;

  --shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.5);
  --soft-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.35);
}