/* Design tokens — the only place colours, sizes and spacing are defined.
 * Values come from design_handoff_invoicing_ui/README.md § "Design Tokens".
 * No template invents a colour or a size; use these.
 *
 * The handoff is hifi: these hex values are final. If a screen needs a shade
 * that is not here, that is a conversation with the designer, not a new value.
 */

/* Two-font system: IBM Plex Sans for the UI, IBM Plex Mono for
 * numbers-as-identifiers (invoice/customer/article numbers, IBAN, tax ids).
 * Self-hosted on purpose — nothing in this app loads from the internet
 * (PRD §7 offline, and no third-party requests to explain under GDPR).
 * Latin subset only; it covers ä ö ü ß and €. Licence: static/fonts/OFL.txt
 */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-var.woff2") format("woff2");
  font-weight: 400 700;          /* one variable file for all four weights */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ---------------------------------------------------------------- colour */
  --canvas:         #f6f5f0;   /* app background */
  --surface:        #ffffff;   /* sidebar, cards, panels, inputs */
  --surface-sunken: #fbfaf6;   /* table heads, totals block, row hover */
  --surface-muted:  #f4f3ed;   /* chips, photo placeholder, stepper hover */
  --surface-hover:  #f1f0ea;   /* nav item hover */
  --scroll-thumb:   #dcdad0;   /* custom scrollbar thumb */

  --border:          #e4e2d9;  /* card/panel/structural borders */
  --border-soft:     #eeece3;  /* inner dividers */
  --border-row:      #f2f0e8;  /* table row dividers */
  --border-input:    #e0ded4;  /* input borders */
  --border-hairline: #d8d5ca;  /* stepper separators */

  --ink:   #16211c;            /* primary text, active segmented bg */
  --ink-2: #46504a;            /* secondary text, nav inactive */
  --ink-3: #6b7670;            /* tertiary text, captions */
  --ink-4: #8b948c;            /* labels, meta */
  --ink-5: #b3b9b1;            /* ✕ idle */
  --placeholder: #9aa39c;

  --accent:        #1c5b3a;    /* primary buttons, links, active accents */
  --accent-hover:  #164a2f;
  --accent-dark:   #134a2d;    /* active nav label */
  --accent-tint:   #eaf1ec;    /* active nav bg, icon tiles, done pill */
  --accent-wash:   #f3f8f4;    /* card add-button background */
  --accent-line:   #dbe4dd;    /* card add-button border */

  --warn:      #8a4a12;        /* overdue amounts and pills */
  --warn-bg:   #f7efe0;
  --danger:    #b9433a;        /* destructive hover (✕, Abbrechen) */
  --danger-bg: #f7eeed;

  /* ------------------------------------------------------------------ type */
  --font:      "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ----------------------------------------------------------------- shape */
  --r-badge:  5px;   /* mono badge on a photo */
  --r-chip:   6px;   /* category chips, VAT chip */
  --r-sm:     7px;   /* segmented buttons, ✕ */
  --r-thumb:  8px;   /* row thumbnail */
  --r-md:     9px;   /* secondary buttons, card inputs, stepper */
  --r-lg:    10px;   /* primary buttons, nav items, toolbar inputs */
  --r-card:  12px;   /* cards */
  --r-pill: 999px;   /* status pills, stepper badges */

  /* Elevation: none. The design uses borders only — do not add shadows.
   * The one exception is the modal sheet, which needs to lift off the page. */
  --shadow-sheet: 0 10px 30px rgba(22, 33, 28, .18);

  /* ----------------------------------------------------- control heights
   * Tablet-first: nothing tappable below --tap-min (44px). */
  --tap-min: 44px;   /* row actions, stepper */
  --tap-xs:  40px;   /* small secondary inside a panel header */
  --tap-seg: 42px;   /* segmented control, stepper +/- */
  --tap-add: 46px;   /* article card "Zur Rechnung" */
  --tap-in:  50px;   /* settings inputs */
  --tap:     52px;   /* nav items, toolbar inputs, header buttons */
  --tap-lg:  56px;   /* panel primary actions */

  /* ----------------------------------------------------------------- space */
  --gap:       16px;
  --gap-lg:    26px;
  --page-pad:  36px;  /* horizontal padding of every screen */
  --rail-w:    clamp(160px, 15%, 216px);
  --panel-w:   clamp(372px, 33%, 452px);
}