/* ══════════════════════════════════════════════════════════════════════
   TWO PACK TRADING — brand layer
   ══════════════════════════════════════════════════════════════════════

   Imported before app.css. It does two things and nothing else:

   1. Defines the brand's own tokens (`--tp-*`) exactly as the kit ships
      them, so a future brand change is one file.
   2. Re-points the app's existing tokens (`--ink`, `--bg`, `--brand` …) at
      those values. Every screen was already written against those names, so
      the whole app re-skins without touching a single screen file.

   Three deliberate departures from `tokens/tokens.css`, each for a reason
   the kit could not have known:

   • **No Google Fonts import.** `font-src 'self'` in the API's CSP would
     block it outright, and the app is offline-first — its shell is
     precached and must work with no network. The three display faces are
     self-hosted, Latin subset only, 53KB in total.

   • **No Inter.** Body text here is bilingual, and the Chinese half is
     always going to be a system CJK face. `system-ui` beside system CJK
     reads as one family; Inter beside it reads as two. Dropping it also
     saved 141KB on a phone.

   • **The kit's type scale is not used.** It sets body at 1rem and labels
     at .75rem. This app is sized for two people in their sixties reading it
     in a shop — 18px body, 20px buttons, 60px targets. The brand supplies
     the *voice*; the sizes stay ours.
   ══════════════════════════════════════════════════════════════════════ */

/* Latin only, on purpose: a CJK webfont is 8–10MB and the system already
   has one. `swap` so text is readable before the font lands. */
@font-face {
  font-family: 'Chakra Petch';
  src: url('/fonts/chakra-petch-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/fonts/chakra-petch-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/fonts/barlow-semi-condensed-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Share Tech Mono';
  src: url('/fonts/share-tech-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ── the kit's tokens, verbatim ─────────────────────────────────── */
  --tp-void:       #03080f;
  --tp-ink:        #071120;
  --tp-ink-2:      #0b1a2e;
  --tp-steel:      #14293f;
  --tp-flare:      #ff6a13;
  --tp-flare-2:    #ff9147;
  --tp-flare-deep: #d64f05;
  --tp-signal:     #2ea6ff;
  --tp-signal-2:   #8fd6ff;
  --tp-paper:      #eef4fa;
  --tp-mute:       #a9bccd;
  --tp-mute-2:     #8fa2b6;
  --tp-line:       rgba(143, 214, 255, .20);
  --tp-line-strong:rgba(143, 214, 255, .38);
  --tp-danger:     #e23b2e;

  /* The kit's own accessibility note: white on the orange fill is 2.87:1
     and fails. Near-black on orange measures 6.6:1. */
  --tp-on-flare:   #2b0e00;

  --tp-ease:       cubic-bezier(.2, .7, .2, 1);
  --tp-dur-fast:   160ms;

  /* ── type roles ─────────────────────────────────────────────────── */
  --tp-font-display: 'Chakra Petch', system-ui, sans-serif;
  --tp-font-label:   'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --tp-font-mono:    'Share Tech Mono', ui-monospace, monospace;
}

/* ══ The app's palette, re-pointed at the brand ════════════════════════

   Dark is now the default, per the brand and the owner's decision, so the
   bare `:root` block carries the dark values and the light overrides sit
   below. That inverts what this app used to do, and matters for one
   practical reason: a founder who has never touched the theme control gets
   the brand's intended surface rather than a white one.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --ink: var(--tp-paper);
  --ink-soft: var(--tp-mute);
  --line: var(--tp-line);
  /* --bg is the card, --bg-soft the page behind it. The card stays the
     lighter of the two, as it always has. */
  --bg: var(--tp-ink-2);
  --bg-soft: var(--tp-ink);
  --brand: var(--tp-flare);
  --brand-ink: var(--tp-on-flare);
  /* The bar's own surface and text. It used to take `--brand` and
     `--brand-ink`, which was right when it was a solid green band and became
     invisible the moment `--brand-ink` turned into the near-black that sits
     on an orange button: near-black text on the near-black bar, 1.11:1.
     Naming them separately means the bar cannot inherit a colour chosen for
     something else. */
  --topbar-bg: var(--tp-void);
  --topbar-ink: var(--tp-paper);
  --danger: #ff9aa2;
  --danger-bg: #2c1417;
  /* Warnings move to yellow. Orange now means "you can act on this", and
     two oranges meaning different things is the one collision the brand's
     own rule creates in an app where warnings were amber. */
  --warn: #ffcf5c;
  --warn-bg: #2b2114;
  --ok: #74c98f;
  --ok-bg: #16281d;
  --on-brand-wash: rgba(255, 255, 255, .14);
  --on-brand-wash-active: rgba(255, 255, 255, .3);
  --on-danger: #2c1417;
  --toast-bg: #eef2f6;
  --toast-ink: var(--tp-ink);
  /* Form controls need their own surface. Reusing `--bg` made an input and
     the card around it the same colour, while `--line` is intentionally faint
     enough for structural dividers. A field is an action boundary, not a
     divider, so it gets a stronger edge in both themes. */
  --field-bg: var(--tp-void);
  --field-border: rgba(143, 214, 255, .58);
  --field-border-hover: var(--tp-signal-2);
  --field-placeholder: var(--tp-mute-2);
  --field-disabled-bg: #101c2b;
  --radius: 14px;
  --tap: 60px;
}

/* Light, for anyone who chooses it — and the basis for printed documents.
   Orange goes to `--tp-flare-deep`: the bright orange is 2.87:1 on white
   and fails, the deep one is 4.22:1. */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --topbar-bg: var(--tp-ink);
    --topbar-ink: var(--tp-paper);
    --ink: #0b1a2e;
    --ink-soft: #4c5f73;
    --line: rgba(11, 26, 46, .16);
    --bg: #ffffff;
    --bg-soft: #eef4fa;
    --brand: var(--tp-flare-deep);
    --brand-ink: #ffffff;
    --danger: #a8121b;
    --danger-bg: #fdeced;
    --warn: #8a5300;
    --warn-bg: #fdf3e2;
    --ok: #14532d;
    --ok-bg: #e8f3ec;
    --on-danger: #ffffff;
    --toast-bg: #0b1a2e;
    --toast-ink: #ffffff;
    --field-bg: #f8fbfe;
    --field-border: #61758a;
    --field-border-hover: #1f6f9f;
    --field-placeholder: #5f7184;
    --field-disabled-bg: #e3eaf1;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --topbar-bg: var(--tp-ink);
  --topbar-ink: var(--tp-paper);
  --ink: #0b1a2e;
  --ink-soft: #4c5f73;
  --line: rgba(11, 26, 46, .16);
  --bg: #ffffff;
  --bg-soft: #eef4fa;
  --brand: var(--tp-flare-deep);
  --brand-ink: #ffffff;
  --danger: #a8121b;
  --danger-bg: #fdeced;
  --warn: #8a5300;
  --warn-bg: #fdf3e2;
  --ok: #14532d;
  --ok-bg: #e8f3ec;
  --on-danger: #ffffff;
  --toast-bg: #0b1a2e;
  --toast-ink: #ffffff;
  --field-bg: #f8fbfe;
  --field-border: #61758a;
  --field-border-hover: #1f6f9f;
  --field-placeholder: #5f7184;
  --field-disabled-bg: #e3eaf1;
}

/* ══ Typography, applied per language ══════════════════════════════════

   None of the brand faces carry a single Chinese glyph, so applying them
   globally would style half of a bilingual interface and leave the other
   half to fall back — at a different weight and rhythm.

   `bilingual()` already emits `.cn` and `.en` as separate spans, so the
   split is free: the technical Latin voice goes on `.en`, and `.cn` keeps
   a proper CJK face. The brand's signature — a letterspaced condensed caps
   label above a technical heading — is exactly the shape this app was
   already rendering.

   Letterspacing is Latin-only and non-negotiable: `.22em` applied to
   `逾期` pulls the characters apart and reads as broken, not as styling.
   ═══════════════════════════════════════════════════════════════════════ */

body {
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* The Chinese line: system CJK, never a brand face, never letterspaced. */
.cn {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  letter-spacing: normal;
}

/* The English line under it: the brand's label voice. */
.en {
  font-family: var(--tp-font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  /* The kit says .22em. At the 14px this sits at on a phone, .22em breaks
     short words apart; .16em keeps the texture and stays readable. */
  opacity: .8;
}

h2, h3 {
  font-family: var(--tp-font-display);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Anything a machine produced or a person must read digit by digit. This is
   the strongest single carrier of the brand in this app — it is already how
   every figure was marked up. */
.mono, .big-money, .qty-box, input[type="number"] {
  font-family: var(--tp-font-mono);
  font-variant-numeric: tabular-nums;
}

.big-money {
  font-family: var(--tp-font-mono);
  letter-spacing: .01em;
}