/*
  Kontor design system — tokens, base, and reusable components.

  The visual language of a Hanseatic counting house: deep ink, a single brass
  accent, ledger typography. Every screen consumes this file; app.css adds only
  layout. Dark is the default register; light is a bond-paper ledger. The theme
  follows the system preference and is overridden by [data-theme] on :root.
*/

:root {
  --ink: #f4f5f3;
  --surface: #ffffff;
  --surface-2: #f0f2ef;
  --sunk: #f7f8f6;
  --line: #e4e7e2;
  --line-strong: #d3d7d0;

  --text: #1a2026;
  --text-dim: #5c6670;
  --text-faint: #8a939d;

  --brass: #9a7a2e;
  --brass-soft: rgb(154 122 46 / 12%);

  --pos: #2e7d5b;
  --neg: #b0492e;
  --info: #3d6e9e;

  --pos-soft: rgb(46 125 91 / 10%);
  --neg-soft: rgb(176 73 46 / 10%);
  --info-soft: rgb(61 110 158 / 10%);

  --focus: var(--brass);
  --on-brass: #1a1206;
  --on-solid: #f4f5f3;

  /* How tall a table grows before it scrolls inside itself rather than growing
     the screen. The reserve is the shell's furniture around a list — main
     padding, page head, filter bar, pager — which measures 239 px; 16rem
     rounds it up, because exact left the screen a pixel too tall and `.main`
     answered that with a 15 px scrollbar.
     Why a token and not a layout chain: docs/issues/024. */
  --table-max: calc(100dvh - 16rem);

  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --shadow-md: 0 10px 30px -16px rgb(26 32 38 / 22%);
  --shadow-lg: -26px 0 64px -30px rgb(26 32 38 / 26%);

  --sans:
    "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, system-ui, sans-serif;
  --mono:
    "SF Mono", "JetBrains Mono", "Cascadia Code", ui-monospace, Menlo, monospace;

  color-scheme: light;
}

/*
  Dark theme, kept for later. Nothing sets data-theme yet, so it stays dormant;
  add a toggle that sets :root[data-theme="dark"] to bring it back.
*/
:root[data-theme="dark"] {
  --ink: #0e1114;
  --surface: #151a1f;
  --surface-2: #1b2128;
  --sunk: #10151a;
  --line: #262e37;
  --line-strong: #333d48;
  --text: #e8ecf1;
  --text-dim: #98a2af;
  --text-faint: #66707c;
  --brass: #c9a24e;
  --brass-soft: rgb(201 162 78 / 14%);
  --pos: #5bb08c;
  --neg: #d2704f;
  --info: #6e9ac9;
  --pos-soft: rgb(91 176 140 / 12%);
  --neg-soft: rgb(210 112 79 / 12%);
  --info-soft: rgb(110 154 201 / 12%);
  --on-solid: #0e1114;
  --shadow-md: 0 10px 30px -14px rgb(0 0 0 / 55%);
  --shadow-lg: -26px 0 64px -28px rgb(0 0 0 / 68%);

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 580;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1rem;
}

/* Merchant nameplate: tracked caps under a thin brass rule. Doubles as home. */
.wordmark {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brass);
  width: max-content;
}

a.wordmark {
  cursor: pointer;
  transition: opacity 120ms ease;
}

a.wordmark:hover {
  opacity: 0.72;
}

.wordmark--lg {
  font-size: 1.5rem;
  letter-spacing: 0.4em;
}

/* Ledger micro-label: the idiom for every column head, field label, eyebrow. */
.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- The signature: a ledger figure with receding cents and a coloured sign. */
.fig {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
  color: var(--text);
}

.fig__frac {
  font-size: 0.84em;
  color: var(--text-dim);
}

.fig__unit {
  font-size: 0.84em;
  color: var(--text-faint);
  margin-left: 0.3em;
}

.fig--pos {
  color: var(--pos);
}

.fig--neg {
  color: var(--neg);
}

.fig--pos .fig__frac,
.fig--neg .fig__frac {
  color: currentcolor;
  opacity: 0.72;
}

/* --- Fields --- */
/*
  `align-content: start` so a field with a hint under it keeps its input on the
  same line as one without. Grid rows stretch to fill the tallest cell otherwise,
  and two fields side by side end up with their inputs at different heights.
*/
.field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.field > span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

input,
select {
  --field-padding-block: 0.55rem;
  font: inherit;
  width: 100%;
  padding: var(--field-padding-block) 0.7rem;
  /* A half-width field is 216px and an Umlageschlüssel can want 347. Native
     selects clip by default, which reads as a rendering fault; an ellipsis at
     least says the name goes on. Keep option text short enough that it rarely
     shows. */
  text-overflow: ellipsis;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

/* A native select sizes its box from the font's own metrics and ignores
   `line-height`, so beside a text field it stood 3 px shorter — Konto and
   Umsatzsteuer side by side in the Kosteneingang sheet (#634). The floor is the
   text field's own height: one inherited line, both paddings, both borders. */
select {
  min-height: calc(1lh + 2 * var(--field-padding-block) + 2px);
}

/* A value the form fills from elsewhere — the IBAN an ingested bank account
   names — reads as filled, not as a field waiting for typing. */
input[readonly] {
  background: var(--sunk);
  color: var(--text-dim);
}

.field--compact input,
.field--compact select {
  --field-padding-block: 0.42rem;
  padding: var(--field-padding-block) 0.6rem;
  font-size: 0.9rem;
}

input::placeholder {
  color: var(--text-faint);
}

:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
}

/* --- Buttons: primary is a solid high-contrast slab; brass stays for identity. */
.btn {
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  padding: 0.52rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  white-space: nowrap;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    opacity 120ms ease;
}

.btn--primary {
  background: var(--text);
  color: var(--on-solid);
}

.btn--primary:hover {
  opacity: 0.88;
}

.btn--quiet {
  border-color: var(--line-strong);
  color: var(--text-dim);
}

.btn--quiet:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* Destructive, and quiet until reached for: a red outline, not a red slab. */
.btn--danger {
  border-color: var(--line-strong);
  color: var(--neg);
  margin-right: auto;
}

.btn--danger:hover {
  background: var(--neg-soft);
  border-color: var(--neg);
}

.btn--block {
  width: 100%;
}

.btn--icon {
  padding: 0.42rem 0.55rem;
  color: var(--text-dim);
  border-color: var(--line-strong);
  line-height: 1;
}

.btn--icon:hover {
  color: var(--brass);
}