/* Design tokens. Every colour, size and timing in the app comes from here. */

/* Onest (SIL Open Font License, fonts/ONEST-OFL.txt): a crisp grotesque, for the bank-app look
   the owner chose on 18 Oct 2026. Upright only. PDFs keep Atkinson Hyperlegible Next, where
   plain legibility matters most. */
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin-wght-normal.3db826ed1c5d.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand: Nasty Letters red for primary actions and accents; ink (the wordmark colour) for
     text and links. Red is never used for body text, so it can't be mistaken for an error. */
  --color-brand: #b92f44;
  --color-brand-hover: #941e32;
  --color-on-brand: #ffffff;
  --color-link: #161a1e;
  --color-link-visited: #161a1e;
  --color-header: #ffffff;
  --color-on-header: #161a1e;
  --color-band: #161a1e;            /* the dark call-to-action band */
  --color-on-band: #ffffff;
  /* The welcome's photo: a flat tint over it so white words read on it in both themes, 4.5:1 or
     more against the brightest of the wood behind them (measured, 20 Oct 2026). A computer's
     small words stand on the sunlit table, so its tint is the darker one now. */
  --color-photo-tint: rgb(16 12 10 / 0.56);
  --color-photo-tint-wide: rgb(16 12 10 / 0.58);
  --color-on-photo: #ffffff;
  /* The welcome's drop card, on the photo: light in both themes, like the photo itself, as the
     bank-app look's white upload panel (owner, 18 Oct 2026). Not redefined for dark mode. */
  --color-card-on-photo: #ffffff;
  --color-card-on-photo-text: #161a1e;
  --color-card-on-photo-muted: #4a5160;
  --color-card-on-photo-line: #e3e6eb;
  --color-card-on-photo-control: #8b929d;
  --color-card-on-photo-fill: #eef0f4;

  /* Paper: letters shown as paper (the example on the home page, an appeal to read and sign).
     Dark in dark mode, so it doesn't glare at night (owner, 13 Oct 2026). */
  --color-paper: #fffdf8;
  --color-paper-ink: #1f2226;
  --color-paper-soft: #565b62;
  --color-paper-line: #e4dfd3;

  /* Logo artwork (decorative; the pupils stay dark in both themes). */
  --color-logo: #b92f44;
  --color-logo-flap: #941e32;
  --color-logo-ink: #252c32;

  /* Neutrals */
  --color-page: #f2f2f4;             /* the grey ground white cards sit on */
  --color-surface: #ffffff;         /* marketing sections */
  --color-surface-alt: #f2f4f7;
  --color-section-alt: var(--color-page);  /* every other band on the welcome: the chat's own ground */
  --color-panel: #ffffff;
  --color-qr-ground: #ffffff;        /* a QR code needs a white ground to scan, in dark mode too */
  --color-text: #161a1e;
  --color-text-secondary: #4a5160;
  --color-border: #e3e6eb;
  --color-border-strong: #737b88;
  --color-border-control: #8b929d;  /* outline chips and buttons: 3:1 or more, so they show in sunlight */
  --color-fill: #eef0f4;

  /* Status: always paired with text, never colour alone. */
  --color-deadline: #a3221b;        /* an approaching deadline, or an error */
  --color-deadline-fill: #fbe8e6;
  --color-you: #7a4a00;             /* waiting on you */
  --color-you-fill: #fdf0d8;
  --color-them: #4a5560;            /* waiting on them */
  --color-them-fill: #e9edf0;
  --color-done: #1f6b3a;            /* done */
  --color-done-fill: #e3f2e8;
  --color-paid: #1f6b3a;            /* the "Payment received" moment: 6.6:1 with white */
  --color-on-paid: #ffffff;

  /* Focus: two tones so it shows on every background. */
  --focus-inner: #ffffff;
  --focus-outer: #0b0c0c;

  /* Type: one family. Heavy, tightly set headings against a calm regular body. */
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;                /* labels, buttons, emphasis */
  --weight-heavy: 800;               /* headings */
  --text-small: 1rem;                /* 16px: the smallest text anywhere */
  --text-body: 1.125rem;             /* 18px */
  --text-lead: 1.3125rem;            /* 21px */
  --text-h2: 1.75rem;
  --text-h1: 2.25rem;
  --text-section: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);  /* a band's heading on the welcome */
  --text-display: clamp(2.5rem, 1.1rem + 4.6vw, 4.75rem);
  --text-display-wide: clamp(4.75rem, 2rem + 3vw, 6rem);  /* the welcome's question, 1600px and up */
  --text-lead-wide: 1.5rem;
  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --leading-tight: 1.15;
  --leading-body: 1.55;
  --measure: 40em;

  /* Space: 4px base. No other values. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Shape: one crisp 8px corner everywhere (the bank-app look, owner, 18 Oct 2026); 4px on
     small labels. */
  --radius-small: 4px;
  --radius-control: 8px;
  --radius-panel: 8px;
  --radius-feature: 8px;
  --border-width: 1px;
  --border-width-field: 1.5px;
  /* Elevation: only for things that sit above the page (the upload card, product
     examples, menus, toasts). Flat panels use a border instead. */
  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 12px rgb(16 24 40 / 0.05);
  --shadow-raised: 0 2px 4px rgb(16 24 40 / 0.04), 0 18px 48px rgb(16 24 40 / 0.12);
  --shadow-float: 0 4px 16px rgb(0 0 0 / 0.16);

  /* Layout */
  --width-page: 1200px;
  --width-staff: 1280px;
  --gutter: var(--space-4);
  --tap-target: 48px;
  --bar-height: 64px;

  /* Motion: purposeful only. */
  --duration-press: 80ms;
  --duration-state: 150ms;
  --duration-page: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --spinner-delay: 300ms;
}

@media (min-width: 640px) {
  :root {
    --gutter: var(--space-5);
  }
}

@media (max-width: 639px) {
  :root {
    --text-body: 1.0625rem;   /* 17px */
    --text-lead: 1.1875rem;
    --text-h2: 1.375rem;
    --text-h1: 1.75rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-brand: #b92f44;
    --color-brand-hover: #941e32;
    --color-on-brand: #ffffff;
    --color-link: #eef0f3;
    --color-link-visited: #eef0f3;
    --color-header: #0f1215;
    --color-on-header: #eef0f3;
    --color-band: #1f242b;
    --color-on-band: #eef0f3;
    --color-page: #0f1215;
    --color-surface: #0f1215;
    --color-surface-alt: #15191e;
    --color-section-alt: #070809;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3);
    --shadow-raised: 0 2px 4px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.5);
    --color-panel: #181c21;
    --color-text: #eef0f3;
    --color-text-secondary: #a9b1bd;
    --color-border: #2e343c;
    --color-border-strong: #7c8594;
    --color-border-control: #66707f;
    --color-paper: #181c21;
    --color-paper-ink: #eef0f3;
    --color-paper-soft: #a9b1bd;
    --color-paper-line: #2e343c;
    --color-fill: #1f242b;
    --color-deadline: #ff9b91;
    --color-deadline-fill: #3a1714;
    --color-you: #f4c26b;
    --color-you-fill: #352610;
    --color-them: #b9c4cd;
    --color-them-fill: #252c31;
    --color-done: #8fd6a4;
    --color-done-fill: #16301f;
    --color-paid: #16301f;
    --color-on-paid: #8fd6a4;
    --focus-inner: #0f1215;
    --focus-outer: #f5f5f5;
    --shadow-float: 0 4px 16px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-brand: #b92f44;
  --color-brand-hover: #941e32;
  --color-on-brand: #ffffff;
  --color-link: #eef0f3;
  --color-link-visited: #eef0f3;
  --color-header: #0f1215;
  --color-on-header: #eef0f3;
  --color-band: #1f242b;
  --color-on-band: #eef0f3;
  --color-page: #0f1215;
  --color-surface: #0f1215;
  --color-surface-alt: #15191e;
  --color-section-alt: #070809;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3);
  --shadow-raised: 0 2px 4px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.5);
  --color-panel: #181c21;
  --color-text: #eef0f3;
  --color-text-secondary: #a9b1bd;
  --color-border: #2e343c;
  --color-border-strong: #7c8594;
  --color-border-control: #66707f;
  --color-paper: #181c21;
  --color-paper-ink: #eef0f3;
  --color-paper-soft: #a9b1bd;
  --color-paper-line: #2e343c;
  --color-fill: #1f242b;
  --color-deadline: #ff9b91;
  --color-deadline-fill: #3a1714;
  --color-you: #f4c26b;
  --color-you-fill: #352610;
  --color-them: #b9c4cd;
  --color-them-fill: #252c31;
  --color-done: #8fd6a4;
  --color-done-fill: #16301f;
  --color-paid: #16301f;
  --color-on-paid: #8fd6a4;
  --focus-inner: #0f1215;
  --focus-outer: #f5f5f5;
  --shadow-float: 0 4px 16px rgb(0 0 0 / 0.5);
}