/* Dytrek Tags: shared design tokens and components (store app and sign-in pages).

   Idea: the screen is quiet paper and graphite so the one loud thing is the
   shelf tag itself, drawn as the real e-paper device with its red price.
   Red is kept for prices and real problems; the brand colour (spruce) is for
   the one main action on each screen. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/static/inter-regular.woff) format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/static/inter-medium.woff) format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/static/inter-semibold.woff) format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(/static/inter-bold.woff) format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-display: swap; src: url(/static/inter-display-bold.woff) format("woff"); }

:root {
  --paper: #eef1ee;          /* page */
  --surface: #ffffff;        /* panels */
  --sunken: #e5e9e5;         /* wells, segmented controls, skeletons */
  --ink: #15191b;
  --ink-2: #394045;
  --muted: #5f676c;
  --rule: #d8ddd8;
  --rule-soft: #e8ebe7;
  --field: #c3c9c4;
  --brand: #0d5a52;          /* spruce */
  --brand-hover: #0a4a43;
  --brand-ink: #ffffff;
  --brand-soft: #dcebe7;
  --brand-line: #9cc7be;
  --price: #c4291f;          /* the e-paper red */
  --ok: #1c6a3b;    --ok-bg: #e0efe5;
  --info: #22508a;  --info-bg: #e3ecf7;  --info-line: #2f6bc0;
  --warn: #86500a;  --warn-bg: #f7ecd8;
  --bad: #ae2318;   --bad-bg: #fbe6e3;  --bad-strong: #c42b1c;
  --idle: #4b5357;  --idle-bg: #e6e9e6;
  --bezel: #2a2f33;          /* the tag's plastic */
  --camera: #1c2023;
  --focus: #2f6bc0;
  --r-lg: 18px; --r-md: 12px; --r-sm: 8px;
  --lift: 0 1px 2px rgba(16, 28, 26, .06), 0 8px 24px rgba(16, 28, 26, .08);
  --float: 0 18px 50px rgba(10, 22, 20, .22);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter Display", "Inter", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111416; --surface: #1a1e21; --sunken: #23282b;
    --ink: #e8ecea; --ink-2: #c4cac7; --muted: #9aa3a0;
    --rule: #353c40; --rule-soft: #2a3033; --field: #4c5559;
    --brand: #6cc1b3; --brand-hover: #84d0c3; --brand-ink: #08201c; --brand-soft: #1b3330; --brand-line: #2f5a53;
    --price: #ff6b5e;
    --ok: #7fdca0; --ok-bg: #173826; --info: #9fc2f2; --info-bg: #172a42; --info-line: #6fa3e8;
    --warn: #efc27c; --warn-bg: #362812; --bad: #f6a197; --bad-bg: #3a1b17; --bad-strong: #ec5f50;
    --idle: #c3c9c6; --idle-bg: #262b2e; --bezel: #0b0d0e; --camera: #0b0d0e; --focus: #7fb0f2;
    --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111416; --surface: #1a1e21; --sunken: #23282b;
  --ink: #e8ecea; --ink-2: #c4cac7; --muted: #9aa3a0;
  --rule: #353c40; --rule-soft: #2a3033; --field: #4c5559;
  --brand: #6cc1b3; --brand-hover: #84d0c3; --brand-ink: #08201c; --brand-soft: #1b3330; --brand-line: #2f5a53;
  --price: #ff6b5e;
  --ok: #7fdca0; --ok-bg: #173826; --info: #9fc2f2; --info-bg: #172a42; --info-line: #6fa3e8;
  --warn: #efc27c; --warn-bg: #362812; --bad: #f6a197; --bad-bg: #3a1b17; --bad-strong: #ec5f50;
  --idle: #c3c9c6; --idle-bg: #262b2e; --bezel: #0b0d0e; --camera: #0b0d0e; --focus: #7fb0f2;
  --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* ---- base ------------------------------------------------------------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 var(--font); font-feature-settings: "cv05", "cv11";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.num, .tid { font-variant-numeric: tabular-nums; }
.tid { letter-spacing: .02em; font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, .h1 { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.12; letter-spacing: -.022em; margin: 4px 0 6px; }
h2, .h2 { font-weight: 650; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 10px; }
@media (min-width: 900px) { h1, .h1 { font-size: 34px; } }
h1:focus { outline: none; }
.lede { color: var(--muted); margin: 0 0 22px; max-width: 62ch; }
p { max-width: 70ch; }

/* ---- buttons and fields ---------------------------------------------------- */

.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: var(--r-md); border: 1px solid var(--field); background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .12s, border-color .12s;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--brand); padding: 0 10px; }
.btn.quiet:hover { background: var(--brand-soft); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); }
.btn.big { min-height: 56px; font-size: 17px; width: 100%; border-radius: 14px; }
.btn.small { min-height: 40px; padding: 0 13px; font-size: 14px; border-radius: 10px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 19px; height: 19px; }
.btn.small svg { width: 16px; height: 16px; }

label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; color: var(--ink-2); }
.hint { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.input, input[type=text], input[type=search], input[type=password], input[type=email], input:not([type]), input[inputmode], textarea, select {
  width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--field); border-radius: var(--r-md);
  background: var(--surface); font-size: 17px; color: var(--ink);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
textarea { padding: 12px 14px; min-height: 160px; font-size: 14px; line-height: 1.45; }
input:focus, textarea:focus, select:focus { border-color: var(--brand); outline: 3px solid color-mix(in srgb, var(--brand) 22%, transparent); outline-offset: 0; }

/* ---- status --------------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 11px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--idle-bg); color: var(--idle);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.note { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--info-bg); color: var(--info); font-size: 15px; }
.note.bad { background: var(--bad-bg); color: var(--bad); }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.ok { background: var(--ok-bg); color: var(--ok); }

/* ---- the shelf tag (the signature) -------------------------------------------
   The picture sits in a graphite bezel like the real ET0290 device. */

.tagdev { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tagdev .bezel {
  width: 100%; max-width: 340px; padding: 9px 9px 14px; border-radius: 14px; background: var(--bezel);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 26px rgba(12, 22, 20, .18);
}
.tagdev .screen {
  aspect-ratio: 296 / 128; background: #fbfbf8; border-radius: 3px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tagdev img { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: pixelated; }
.tagdev .empty { color: #6d7478; font-size: 14px; padding: 12px; text-align: center; }
.tagdev.dim .screen { opacity: .45; }
.tagdev figcaption { font-size: 13px; color: var(--muted); text-align: center; }
.tagdev.small .bezel { max-width: 200px; padding: 6px 6px 9px; border-radius: 10px; }