/*
  Carlito, shipped rather than hoped for — decision 0124.

  **Calibri is not on macOS or Linux** unless Office installed it, so
  naming it in a stack gave Calibri on Windows and San Francisco
  everywhere else — which is what the operator saw after deploying and
  correctly reported as "no changes".

  Carlito is **metric-compatible with Calibri**: the same widths and
  shapes, openly licensed (SIL OFL). Shipping it is the only way to get
  the same face on every machine, including a customer's.

  Three faces, 92KB total. Bold italic is deliberately absent — nothing
  in this interface uses it, and a fourth file for a combination nobody
  asks for is 30KB nobody needs. A browser will synthesise one if it is
  ever needed, badly, and that will be the signal to ship it properly.

  `font-display: swap` so text is readable immediately in the fallback
  and reflows once: a person keying an invoice should not wait on a
  font, and the fallback is metric-compatible so the reflow is slight.
*/
@font-face {
  font-family: "Carlito";
  src: url("/fonts/carlito-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Carlito";
  src: url("/fonts/carlito-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Carlito";
  src: url("/fonts/carlito-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/*
 * Design tokens for vf-ui — decision 0099.
 *
 * Carried across from docs/design/mockups/tokens.css, where the split
 * these files depend on was worked out: every colour is a token, so a
 * customer or partner livery is a substitution and nowhere else.
 *
 * **The brand block below is overridden at runtime**, by a stylesheet
 * fetched from vf-licence for whichever customer is being served
 * (decision 0096). The values here are the fallback — what somebody
 * sees before a customer is known, and what a customer with no livery
 * keeps.
 *
 * Everything above the brand block is structural and is NOT settable by
 * a customer: spacing, type scale and radius are how a screen stays
 * readable, and somebody who could change them could make a queue
 * unusable and then report it as a bug.
 */

:root {
  color-scheme: light dark;

  /*
    Daytime — decision 0139.
    **Lighter blues**, asked for by name. Cool where this was warm grey,
    and the surfaces stay close together so decision 0108's panels
    separate by border rather than by contrast.
  */
  --surface-0: #f2f6fb;
  --surface-1: #e8eff8;
  --surface-2: #ffffff;

  --text-primary: #121a26;
  --text-secondary: #4a5768;
  --text-muted: #7b8798;

  --border: rgba(18, 26, 38, 0.10);
  --border-strong: rgba(18, 26, 38, 0.18);

  --bg-accent: #e6f1fb;
  --text-accent: #185fa5;
  --border-accent: #378add;

  --bg-warning: #faeeda;
  --text-warning: #854f0b;
  --border-warning: #ef9f27;

  --bg-success: #eaf3de;
  --text-success: #3b6d11;
  --border-success: #639922;

  --radius: 8px;
  /*
    Calibri, asked for by name — decision 0124.

    **Carlito is metric-compatible with Calibri** and openly licensed,
    so a machine without Calibri gets the same shapes at the same widths
    rather than a fallback that reflows every panel.

    Calibri first for a machine that has it — a Windows customer sees
    the face they know, and it is metrically identical to the one
    everyone else gets. The system stack follows both, for the moment
    before the file arrives.
  */
  --font-sans: Calibri, Carlito, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

  /*
    One type scale — decision 0124.

    The interface had **seven hardcoded sizes** with 11, 12 and 13px all
    in use, which is accumulation rather than a scale: nothing said what
    the difference between 12 and 13 meant, so each new panel picked
    whichever looked right beside its neighbour.

    Four steps, each with a job. **A size not on this list is a
    decision somebody should have to justify.**

    Calibri sits a little smaller than the system faces at the same
    pixel size, so these are a point above what the interface used.
  */
  --text-sm: 12px;   /* Labels, captions, secondary detail. */
  --text-base: 14px; /* Body, fields, table cells — most of the screen. */
  --text-lg: 16px;   /* Panel headings, a document's identity. */
  --text-xl: 20px;   /* The one thing a screen is about. */

  /* Brand — the only block a white-label deployment replaces. */
  --brand-bar: #0f6e56;
  --brand-fill: #0f6e56;
  --brand-chip: #9fe1cb;
  --brand-chip-text: #04342c;
  --brand-name: "VibeFinance";
}

/*
  Night time — decision 0139.

  **Dark midnight blues**, asked for by name. Not black: a true black
  surface makes a white document in the preview panel (decision 0123)
  glare, and this is a screen somebody reads all day.

  Written once and applied two ways: by the operating system's own
  preference, and by an explicit choice. The rules are identical, so a
  person switching to Night time gets exactly what somebody whose
  machine is dark already had.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-mood="day"]) {
    --surface-0: #0d1626;
    --surface-1: #141f33;
    --surface-2: #1b2941;
    --text-primary: #e8eef7;
    --text-secondary: #9dabc0;
    --text-muted: #6f7e94;
    --border: rgba(232, 238, 247, 0.12);
    --border-strong: rgba(232, 238, 247, 0.22);
    --bg-accent: #123a66;
    --text-accent: #9fc9f2;
    --bg-warning: #4a3208;
    --text-warning: #f0c477;
    --bg-success: #1f4310;
    --text-success: #a8cf85;
  }
}

/**
 * The same, chosen rather than inherited.
 *
 * **Duplicated deliberately.** A single rule cannot express "dark
 * unless overridden, or when chosen" without `:where()` gymnastics that
 * read worse than saying it twice — and a test asserts the two blocks
 * agree, so they cannot drift.
 */
:root[data-mood="night"] {
  --surface-0: #0d1626;
  --surface-1: #141f33;
  --surface-2: #1b2941;
  --text-primary: #e8eef7;
  --text-secondary: #9dabc0;
  --text-muted: #6f7e94;
  --border: rgba(232, 238, 247, 0.12);
  --border-strong: rgba(232, 238, 247, 0.22);
  --bg-accent: #123a66;
  --text-accent: #9fc9f2;
  --bg-warning: #4a3208;
  --text-warning: #f0c477;
  --bg-success: #1f4310;
  --text-success: #a8cf85;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--surface-0);
  margin: 0;
  padding: 2rem 1rem;
}

.page {
  max-width: 760px;
  margin: 0 auto;
}

.note {
  font-size: var(--text-base);
  color: var(--text-secondary);
  border-left: 2px solid var(--border-strong);
  padding-left: 12px;
  margin: 0 0 1.5rem;
}

h1 {
  font-size: var(--text-xl);
  font-weight: 500;
  margin: 0 0 4px;
}

/*
  Form controls take the page's font entirely — decision 0124.

  **`font: inherit` rather than `font-family: inherit`.** A browser
  gives a control its own family, size, weight and line-height, and
  inheriting only the family leaves the other three at the browser's
  defaults — which is why the entry cells have always looked slightly
  larger than everything around them.

  `select` is the worst offender: several platforms ignore a family set
  any other way.
*/
input,
textarea,
button,
select {
  font: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-2);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 10px;
}

input,
textarea {
  min-height: 32px;
  box-sizing: border-box;
  /*
    **Full width of whatever holds it.**

    Nothing set one, so a browser's default of roughly twenty
    characters applied — which looked reasonable in a narrow form and
    absurd in a full-width panel. Reported from the rule screen, where
    the box for a sentence sat at a fifth of the space beside it.

    Set here rather than on that screen: every textarea in this
    interface is a box somebody writes prose into, and none of them
    wants a browser's guess.
  */
  width: 100%;
}

button {
  cursor: pointer;
  background: transparent;
}

button:hover {
  background: var(--surface-1);
}

table {
  border-collapse: collapse;
}