/* MANCHAN POS — UI derivatives of the approved Fused Forms palette.
   See docs/brand/manchan-colors.json for logo colors and sampling limits. */
:root {
  --page: #f7fafb;
  --paper: #ffffff;
  --ink: #00162f;
  --muted: #526579;
  --blue: #006caf;
  --blue-hover: #005a92;
  --green: #00796b;
  --primary-hover: #00665b;
  --primary-active: #004d44;
  --line: #d7e6e4;
  --band: #e9f6f3;
  --display: #eef5f5;

  /* Semantic extended tokens for 10/10 polish */
  --danger: #c02b20;
  --danger-bg: #fdf2f2;
  --border-subtle: #d7e6e4;
  --border-strong: #74899d;
  --border-focus: #006caf;

  /* Elevation & Glow tokens */
  --shadow-sm: 0 1px 3px rgba(0, 22, 47, 0.04);
  --shadow-card: 0 4px 20px -2px rgba(0, 22, 47, 0.06);
  --shadow-card-hover: 0 14px 34px -4px rgba(0, 22, 47, 0.1), 0 0 0 1px rgba(0, 121, 107, 0.16);
  --shadow-modal: 0 24px 64px -12px rgba(0, 22, 47, 0.22), 0 0 0 1px rgba(0, 121, 107, 0.08);
  --shadow-glow-green: 0 0 36px -6px rgba(0, 121, 107, 0.22);
  --shadow-glow-blue: 0 0 36px -6px rgba(0, 108, 175, 0.2);

  /* Micro-motion tokens */
  --ease-smooth: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.button {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 2px 8px rgba(0, 121, 107, 0.2);
}
.button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 6px 18px rgba(0, 121, 107, 0.32);
}
.button:active {
  background: var(--primary-active);
  border-color: var(--primary-active);
  box-shadow: 0 2px 4px rgba(0, 121, 107, 0.15);
}

/* Show the exact POS lockup in the approved board. This is a CSS viewport;
   no AI redraw or altered logo pixels. Replace with approved vector when available. */
.brand-crop { width: 106px; height: 88px; }
.brand-crop img { width: 384px; height: 256px; left: -268px; top: -32px; }
@media (max-width: 900px) {
  .brand-crop { width: 82px; height: 66px; }
  .brand-crop img { width: 288px; height: 192px; left: -201px; top: -24px; }
}