/*
 * Direction A „Liste" — Karopapier und Verkehrsschild.
 *
 * Cool squared-paper ground rather than a neutral grey, graphite ink rather than
 * black, and one saturated colour: DIN signage blue.
 *
 * Two roles, never mixed. --accent is primary and affirmative: the button that
 * writes, a selected row, an item in the cart. --danger is destructive and lives
 * on exactly one surface, the swipe-to-delete layer. A selection has never been
 * an emergency, so it never gets the red.
 *
 * One theming mechanism: custom properties redefined under prefers-color-scheme
 * and under [data-theme]. No dark: variant anywhere — mixing the two is what
 * broke Moneta's contrast twice.
 *
 * Values only, served as they are at /tokens.css: the app links this file, and
 * so do the server's own pages — the consent screen, the front door — so no
 * copy of a value can miss a fix.
 */

/*
 * Direction A's faces, shipped with the app. The prototypes carried them as
 * data URIs; the app never did, so every screen fell back to the system font
 * and the condensed names that keep „REWE Bio Eier Spitz und Bube" on one line
 * were only ever seen in the prototype. SIL OFL, precached by the worker.
 */
@font-face {
  font-family: 'Fira Sans';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/FiraSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/FiraSans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/FiraSansCondensed-700.woff2') format('woff2');
}

:root {
  --paper: #edefec;
  --raised: #f6f8f5;
  --ink: #21262b;
  --muted: #5f686f;
  --hair: #c9d0d4;
  /* an edge that marks a control — a field, a pill, a chip, a switch's track; --hair only divides */
  --line: #808990;
  --accent: #14508c;
  --accent-ink: #fff;
  --cart: #14508c;
  --pending: #806219;
  --danger: #8a322b;
  --danger-ink: #fff;
  /* what a product photo sits on, in both themes: the photos are cut out on white */
  --photo: #fff;

  --row: 56px;
  /* Floor for anything a finger acts on. Audited in a browser, not asserted. */
  --tap: 44px;

  /*
   * Spacing is a scale, not a number per element. Fourteen different values
   * had crept into the stylesheets, and the same control sat 26 px from the
   * edge on one screen and 30 px on the next. Everything below is one of
   * these, and the two edges are named: --inset is where a title, a text
   * block, a field or a button starts; --gutter is where a row's tap
   * highlight starts, so that the row's own padding brings its picture to
   * --inset. The rendered result is measured in e2e/tests/craft.spec.ts.
   */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --inset: 16px;
  --gutter: 8px;

  /*
   * Type, corners, buttons and shadows are scales for the same reason
   * (design review, 2026-09-23): twenty-three font sizes and sixteen radii
   * had grown one screen at a time, and a row's name was 17.5 px on the list
   * and 18 px in Vorlagen. apps/web/test/tokens.spec.ts keeps every
   * stylesheet on them.
   */
  --text-label: 12px;
  --text-meta: 13px;
  --text-small: 14px;
  /* also every field's: below 16 px iOS zooms into a field on focus */
  --text-body: 16px;
  --text-name: 17.5px;
  --text-heading: 24px;
  --text-title: 27px;
  --text-display: 30px;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-pill: 999px;

  --btn: 50px;
  /* a box to search or name in */
  --box: 48px;
  /* Layers: what lies above what. A component's own stacking (1, 2) stays local. */
  --z-lift: 3;
  --z-outside: 4;
  --z-strip: 5;
  --z-toast: 5;
  --z-menu: 6;
  --z-deck: 6;
  --z-sheet: 10;
  /* How long a change takes: a small one, a move, a slow one. The loops and the
     long highlight of a row another phone changed keep their own rhythm. */
  --dur-quick: 0.16s;
  --dur-move: 0.24s;
  --dur-slow: 0.4s;
  /* the deck's two answers, where the thumb rests */
  --btn-thumb: 56px;

  --shadow-float: 0 8px 24px rgb(0 0 0 / 18%);
  --shadow-sheet: 0 -10px 40px rgb(0 0 0 / 25%);
  --shadow-knob: 0 1px 3px rgb(0 0 0 / 30%);

  --font: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /*
   * The mark. One stall in two densities (design brief, „Die Marke"): the
   * emblem for the launcher, the first screens, the consent page and Gerät;
   * the bare stall for the tab bar and the favicon. In the app the emblem is
   * an ink-only SVG used as a mask, so it takes the theme's accent instead
   * of carrying a colour.
   */
  --marke: url('/marke.svg');
  --font-condensed: 'Fira Sans Condensed', var(--font);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171a1d;
    --raised: #1f2327;
    --ink: #e6e9e7;
    --muted: #98a1a7;
    --hair: #333b40;
    --line: #687178;
    --accent: #5fa0dc;
    --accent-ink: #0c1620;
    --cart: #5fa0dc;
    --pending: #d3a94a;
    --danger: #d27469;
    --danger-ink: #1a0b09;
  }
}

:root[data-theme='dark'] {
  --paper: #171a1d;
  --raised: #1f2327;
  --ink: #e6e9e7;
  --muted: #98a1a7;
  --hair: #333b40;
  --line: #687178;
  --accent: #5fa0dc;
  --accent-ink: #0c1620;
  --cart: #5fa0dc;
  --pending: #d3a94a;
  --danger: #d27469;
  --danger-ink: #1a0b09;
}

:root[data-theme='light'] {
  --paper: #edefec;
  --raised: #f6f8f5;
  --ink: #21262b;
  --muted: #5f686f;
  --hair: #c9d0d4;
  --line: #808990;
  --accent: #14508c;
  --accent-ink: #fff;
  --cart: #14508c;
  --pending: #806219;
  --danger: #8a322b;
  --danger-ink: #fff;
}

/*
 * Direction D „Wegweiser" additions. A soft accent surface for pressed states
 * and the tab bar, the scrim under a sheet, one easing for everything that
 * moves, and six muted hues so hand-typed products can be told apart at a
 * glance — the honest answer to „more picture, fewer words" for a product that
 * has no picture.
 */
:root {
  --accent-soft: #dfe7f0;
  --scrim: rgb(33 38 43 / 42%);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --h0-bg: #dde5ee;
  --h0-fg: #2b4767;
  --h1-bg: #e0e7d8;
  --h1-fg: #3d5232;
  --h2-bg: #efe6d0;
  --h2-fg: #664f1d;
  --h3-bg: #ecdfd9;
  --h3-fg: #6a3b31;
  --h4-bg: #e5dfea;
  --h4-fg: #54436a;
  --h5-bg: #d9e8e5;
  --h5-fg: #27554e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent-soft: #1f3040;
    --scrim: rgb(0 0 0 / 55%);
    --h0-bg: #26333f;
    --h0-fg: #b9cde3;
    --h1-bg: #2a3527;
    --h1-fg: #bfd3b3;
    --h2-bg: #3a3222;
    --h2-fg: #e2cd9c;
    --h3-bg: #3b2b27;
    --h3-fg: #e4bdb4;
    --h4-bg: #33293b;
    --h4-fg: #cfc0de;
    --h5-bg: #223532;
    --h5-fg: #aed4cc;
  }
}
:root[data-theme='dark'] {
  --accent-soft: #1f3040;
  --scrim: rgb(0 0 0 / 55%);
  --h0-bg: #26333f;
  --h0-fg: #b9cde3;
  --h1-bg: #2a3527;
  --h1-fg: #bfd3b3;
  --h2-bg: #3a3222;
  --h2-fg: #e2cd9c;
  --h3-bg: #3b2b27;
  --h3-fg: #e4bdb4;
  --h4-bg: #33293b;
  --h4-fg: #cfc0de;
  --h5-bg: #223532;
  --h5-fg: #aed4cc;
}
:root[data-theme='light'] {
  --accent-soft: #dfe7f0;
  --scrim: rgb(33 38 43 / 42%);
  --h0-bg: #dde5ee;
  --h0-fg: #2b4767;
  --h1-bg: #e0e7d8;
  --h1-fg: #3d5232;
  --h2-bg: #efe6d0;
  --h2-fg: #664f1d;
  --h3-bg: #ecdfd9;
  --h3-fg: #6a3b31;
  --h4-bg: #e5dfea;
  --h4-fg: #54436a;
  --h5-bg: #d9e8e5;
  --h5-fg: #27554e;
}