/* LifePrisma design system, applied to Financeiro Pessoal.
 *
 * Source of truth: "lifeprsima_brandbook.pdf" v1.0 (2026) + the palette sheet
 * in the brand-assets folder. Guilherme owns both brands and asked for this
 * app to wear that system; only the PALETTE and TYPE come across — the
 * lifeprisma logo does not, because this app is personal and branding it
 * otherwise would be a lie about whose ledger this is.
 *
 * Fonts are SELF-HOSTED (app/static/fonts, converted TTF -> woff2, ~420 KB
 * total). No Google Fonts CDN: the app already carries a CDN/CSP debt item,
 * and adding a third-party font host to a financial tool for the sake of
 * three typefaces is the wrong trade.
 *
 * The colour tokens are also mapped onto Tailwind's `slate` scale in
 * _base.html, so the ~600 existing `slate-*` classes across the templates
 * re-skin themselves instead of being rewritten one by one.
 */

/* --- type ------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Host Grotesk carries headlines and the wordmark. Italic is never used
   (brandguide 04). */
@font-face {
  font-family: "Host Grotesk";
  src: url("/static/fonts/HostGrotesk-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("/static/fonts/HostGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono signals "this is data": amounts, account codes, CNPJs,
   access keys. In the brandbook it carries biomarkers; here it carries
   money, which is the same job — a value you compare digit by digit. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- tokens ----------------------------------------------------------- */

:root {
  /* The four confirmed brand colours. */
  --violet-600: #2e2b5f; /* Primária — Deep Violet: identity, titles, actions */
  --neutral-900: #0a0a0f; /* Base escura — Near Black: text */
  --neutral-25: #f1eee7; /* Base clara — Warm Cream: the paper, 55% of the page */
  --lavender-grey: #9094b0; /* Neutro/UI: labels and metadata only */

  /* Working tones from the published scales. */
  --violet-50: #f7f5ff;
  --violet-100: #ebe8ff;
  --violet-200: #d4cefb;
  --violet-700: #433182;
  --violet-900: #180e3a;
  --lavender-100: #e7e7f0;
  --lavender-200: #d3d3e0;
  --lavender-700: #545364;

  /* Gold — the "waiting on you" badge. NOT from the brandguide: its four
     colours are violet, near-black, cream and lavender, and none of them can
     mean "act on this" without colliding with identity or body text. So this
     is a deliberate addition, chosen to sit on Warm Cream beside Deep Violet
     (a warm ochre rather than a yellow, dark enough to carry white text at
     ~5:1). If the brand ever publishes an accent, replace this one line. */
  --gold-600: #9a6f14;

  --surface: #fcfbf8; /* neutral-25 from the paper ramp — cards on cream */
  --paper: var(--neutral-25);
  --ink: var(--neutral-900);
  --rule: #ddd9d0; /* hairline that reads on cream, not on white */
}

/* --- base ------------------------------------------------------------- */

body {
  background-color: var(--paper);
  color: var(--ink);
}

/* Headlines are Host Grotesk; body copy stays Inter (brandguide 04). Applied
   here rather than per-template so a new page inherits the hierarchy for
   free. */
h1,
h2,
h3,
.font-display {
  font-family: "Host Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Money, account codes, CNPJs, ids. `tabular-nums` is what makes a column of
   amounts line up on the decimal comma. */
.num {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The wordmark: "life" bold + "prisma" light is the lifeprisma construction;
   The wordmark reads "Financeiro" in Deep Violet + "Pessoal" lighter, so
   the two-part weight logic carries over without borrowing the other brand's
   name. */
.wordmark {
  font-family: "Host Grotesk", "Inter", sans-serif;
  letter-spacing: -0.02em;
}
.wordmark strong {
  font-weight: 700;
  color: var(--violet-600);
}
.wordmark span {
  font-weight: 400;
  color: var(--lavender-700);
}

/* Focus ring in the brand violet — visible on cream, and on every
   interactive element rather than only the ones a template remembered. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--violet-600);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Tables that carry more columns than the page is wide scroll INSIDE their
   own card instead of clipping (the /documents and /inbox bug). The wrapper
   opts in with .table-scroll. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}