/* High contrast, and the softer "Colores" mode below it (owner, 2026-11-07).
 *
 * Counter screens are not always bright, and a window in the sun washes a screen out: light grey on
 * white and pale borders are the first things to disappear. This sheet is the answer, and it is a
 * *theme*, not a second design: the same pages, the same tokens, with the palette moved to the ends of
 * the scale. It turns on with `html.hc`, set before the first paint from this device's own choice
 * (`mini-pos.contrast` in localStorage, written by `js/contrast.js`; the toggle is on the sales screen
 * and in the column), and follows the system's "more contrast" setting until somebody chooses.
 *
 * What changes, and why each:
 *   * Text is black on white, and the "muted" grey is dark enough to read as text (a muted label used to
 *     be 4.8:1; it is now over 14:1). `tests/test_contrast.py` computes every pair below, so a palette
 *     change that loses contrast fails a test rather than a customer.
 *   * Every edge is dark and two pixels: cards, fields, buttons, tiles. Pale 1 px lines vanish in glare;
 *     a dark edge is still there.
 *   * The tile floor is a mid grey, so white tiles lie on something instead of fading into it.
 *   * Weights go up one step and the smallest sizes up a pixel; nothing is thinner than a regular.
 *   * Green is a deep green with white text (7:1), never a bright one with dark text, and warnings are
 *     dark amber on yellow, not pale.
 *
 * This is the one sheet that names colours of its own: it *is* the second palette. It is deliberately
 * not in the design system's token consumers (`tests/test_design_system.py`).
 */
html.hc {
  --brand-900: #04210f;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ececec;
  --surface-3: #c9cfcb;
  --border: #111827;
  --text: #000000;
  --text-label: #000000;
  --muted: #1f2937;
  --on-accent: #ffffff;

  --accent: #0a6323;
  --accent-strong: #0a6323;
  --accent-dark: #053d16;
  --accent-soft: #cdeed7;

  --ok: #053d16;
  --ok-soft: #c4ecd0;

  --warn: #7a3b00;
  --warn-bg: #ffe08a;
  --warn-ink: #3d1d00;
  --warn-line: #7a3b00;
  --warn-fill: #fff0b8;

  --danger: #a8001c;
  --danger-soft: #ffd5db;
  --danger-ink: #6b0013;

  --violet: #3b1c8c;
  --violet-soft: #dcd6ff;
  --violet-ink: #1f0f66;

  --sidebar-text: #ffffff;
  --sidebar-muted: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, .24);
  --sidebar-line: rgba(255, 255, 255, .6);
  --sidebar-active-ink: #ffffff;

  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fw-regular: 500;
  --fw-medium: 600;
  --fw-semibold: 700;
  --fw-bold: 700;
  --fw-heavy: 800;

  --ring: 0 0 0 2px var(--surface), 0 0 0 5px var(--text);
  --ring-on-dark: 0 0 0 2px var(--brand-900), 0 0 0 5px var(--sidebar-text);
  --shadow: none;
  --shadow-sheet: none;
  --shadow-lg: none;
}

/* "Colores": the softer of the two (owner, 2026-11-07: "another just with the colours ... visible
 * without losing too much of its aesthetic"). Only the palette moves: the same sizes, weights,
 * shadows and one-pixel edges as the design, with the pale greys a dim screen loses taken darker.
 * Text is near-black, the muted grey reads as text (4.8:1 -> 10:1), edges are a grey you can see
 * (1.2:1 -> 4.4:1 on white, 3.4:1 on the tile floor; the non-text minimum is 3:1), the tile floor is a step darker so tiles lie on
 * something, and the greens are one shade deeper. `tests/test_contrast.py` measures it too. */
html.vivid {
  --bg: #f1f4f2;
  --surface-2: #eef2ef;
  --surface-3: #dce4de;
  --border: #6f7a72;
  --text: #0f172a;
  --text-label: #111827;
  --muted: #374151;

  --accent: #116b32;
  --accent-strong: #15803d;
  --accent-dark: #0d5126;
  --accent-soft: #e3f6e9;

  --ok: #065f46;
  --warn: #8a3f05;
  --warn-ink: #5c3402;
  --warn-line: #d9a514;
  --danger: #b91c1c;
  --danger-ink: #8f1414;
  --violet-ink: #2a2380;

  --sidebar-text: #ffffff;
  --sidebar-muted: #dcefe2;
  --sidebar-line: rgba(255, 255, 255, .3);
  --sidebar-active-ink: #ffffff;
}
html.vivid .product-grid { background: var(--surface-3); }
html.vivid .tile-net, html.vivid .tile-meta { color: var(--muted); }
html.vivid .product-tile:hover, html.vivid .product-tile:focus-visible { border-color: var(--accent); }

/* Edges you can see in glare. */
html.hc .card,
html.hc .modal-card,
html.hc .customer-cart,
html.hc .cart,
html.hc .drawer-strip,
html.hc .banner,
html.hc .product-tile,
html.hc .stat,
html.hc .light a {
  border: 2px solid var(--border);
  box-shadow: none;
}
html.hc .input,
html.hc select,
html.hc textarea {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
html.hc .input::placeholder, html.hc textarea::placeholder { color: var(--muted); opacity: 1; }
html.hc .btn,
html.hc .pay-btn,
html.hc .quick-cash button,
html.hc .icon-btn,
html.hc .qty button {
  border: 2px solid var(--border);
  color: var(--text);
  font-weight: var(--fw-semibold);
  background: var(--surface);
}
html.hc .btn-primary,
html.hc .pay-btn.is-active,
html.hc .quick-cash button.is-active {
  background: var(--accent-dark);
  border-color: var(--text);
  color: var(--on-accent);
}
html.hc .btn:hover,
html.hc .pay-btn:hover,
html.hc .quick-cash button:hover { background: var(--surface-3); color: var(--text); }
html.hc .btn-primary:hover { background: var(--accent); color: var(--on-accent); }
html.hc .btn-danger { background: var(--danger-ink); border-color: var(--text); color: var(--on-accent); }
html.hc :disabled { opacity: .6; }

/* The goods: white tiles on a darker floor, the name and the price at full strength. */
html.hc .product-grid { background: var(--surface-3); }
html.hc .product-tile:hover, html.hc .product-tile:focus-visible { border-color: var(--accent-dark); outline: 3px solid var(--accent-dark); outline-offset: -2px; }
html.hc .tile-name { color: var(--text); font-weight: var(--fw-heavy); }
html.hc .tile-price { color: var(--accent-dark); font-weight: var(--fw-heavy); }
html.hc .tile-net, html.hc .tile-meta, html.hc .tile-category { color: var(--muted); }
html.hc .tile-category { border-color: var(--border); }

/* Text that was "quiet" is plain text. */
html.hc .muted, html.hc .hint, html.hc .sub, html.hc .stat-label, html.hc .field-label,
html.hc .sub-line, html.hc .cart-line .cl-price, html.hc .till-keys, html.hc .tile-meta { color: var(--muted); }
html.hc .till-keys kbd { border: 2px solid var(--border); color: var(--text); background: var(--surface); }

/* The cart: lines separated by lines you can see, the total unmistakable. */
html.hc .cart-line { border-bottom: 2px solid var(--border); }
html.hc .cl-total, html.hc #cart-total, html.hc #pay-total-big { color: var(--text); font-weight: var(--fw-heavy); }
html.hc #checkout, html.hc #pay-open { background: var(--accent-dark); border: 2px solid var(--text); color: var(--on-accent); font-weight: var(--fw-heavy); }

/* Badges and pills carry their meaning in the edge as well as the tint. */
html.hc .badge, html.hc .pill { border: 1px solid currentColor; font-weight: var(--fw-semibold); }
html.hc .table th { background: var(--surface-3); color: var(--text); border-bottom: 2px solid var(--border); }
html.hc .table td { border-bottom: 1px solid var(--border); }

/* Links in running text are underlined; the column's own links are not (the column is not text). */
html.hc a:not(.btn):not(.nav-link):not(.who-out):not(.brand):not([role="tab"]) { text-decoration: underline; }

/* The column: the active page is white-on-deep-green with a white edge, not a glow. */
html.hc .nav a.active, html.hc .nav a.nav-sell { outline: 2px solid var(--sidebar-text); outline-offset: -2px; }
html.hc .settings-nav a[aria-current="page"] { color: var(--accent-dark); border: 2px solid var(--accent-dark); }

/* The toggle itself says which way it is. */
[data-contrast-toggle] { cursor: pointer; }
html.vivid .btn[data-contrast-toggle] { border-color: var(--accent); color: var(--accent-dark); }
html.hc .btn[data-contrast-toggle], html.hc button[data-contrast-toggle]:not(.who-out) {
  background: var(--text); color: var(--surface); border-color: var(--text);
}