/*
 * Web translation of SN 共用平台標準.md.
 * Flutter ARGB values #47000000 and #DDFFFFFF become CSS rgba() values here.
 */
:root {
  --sn-background: #E9EAE7;
  --sn-background-rgb: 233 234 231;
  --sn-background-secondary: #D7DCDD;
  --sn-background-secondary-rgb: 215 220 221;
  --sn-blue: #496576;
  --sn-blue-rgb: 73 101 118;
  --sn-ink: #142E47;
  --sn-ink-rgb: 20 46 71;
  --sn-orange: #CC7A00;
  --sn-success: #347A5B;
  --sn-success-rgb: 52 122 91;
  --sn-error: #A23C3C;
  --sn-grid-size: 72px;
  --sn-card-opacity: .8;
  --sn-matte-radius: 26px;
  --sn-camera-radius: 36px;
  --sn-action-height: 52px;
  --sn-action-radius: 28.6px;
  --sn-grid-ink: rgba(36, 40, 38, .045);
  --sn-matte-shadow: 0 6.3px 11.9px rgba(0, 0, 0, .278);
  --sn-matte-highlight: -1px -1px 2px rgba(255, 255, 255, .867);
}

body,
.page {
  color: var(--sn-ink);
  background-color: var(--sn-background);
}

.page {
  padding-inline: 10px;
  background-image:
    linear-gradient(var(--sn-grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--sn-grid-ink) 1px, transparent 1px);
  background-size: var(--sn-grid-size) var(--sn-grid-size);
  background-position: center;
}

.brand,
.venue-card__body h2,
.section-heading h1,
.section-heading h2,
.detail-card h1,
.menu-row,
.editor label {
  color: var(--sn-ink);
}

.quiet-link,
.text-button,
.landing-copy p,
.venue-card__body p,
.privacy-note,
.muted,
.form-note,
.section-heading p,
.field-label {
  color: var(--sn-blue);
}

/* Standard 80% Matte Card: no grey outline, lower contact shadow and upper-left highlight. */
.matte-card,
.venue-card {
  background: rgb(var(--sn-background-rgb) / var(--sn-card-opacity));
  border: 0;
  border-radius: var(--sn-matte-radius);
  box-shadow: var(--sn-matte-shadow), var(--sn-matte-highlight);
}

.venue-card__scene {
  height: 230px;
  color: var(--sn-ink);
  background-color: rgba(215, 220, 221, .8);
  background-image:
    linear-gradient(var(--sn-grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--sn-grid-ink) 1px, transparent 1px);
  background-size: var(--sn-grid-size) var(--sn-grid-size);
  background-position: center;
}

.button {
  min-height: var(--sn-action-height);
  border-radius: var(--sn-action-radius);
  background: var(--sn-blue);
  color: #fff;
  transition: transform 85ms ease-out, background 220ms ease-out;
}

.button:hover { background: var(--sn-ink); }
.button--secondary { color: var(--sn-ink); border-color: var(--sn-blue); background: transparent; }
.button:active,
.icon-button:active { transform: scale(.9); transition-duration: 85ms; transition-timing-function: ease-out; }
.button:not(:active),
.icon-button:not(:active) { transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1); }

.compass { color: var(--sn-blue); }
.compass i { background: var(--sn-success); }

/* The camera is the one allowed dark viewport; result data keeps the common colours. */
.camera-page { background: var(--sn-ink); }
.camera-viewport {
  background: var(--sn-background-secondary);
  border-radius: var(--sn-camera-radius);
}
.paper-menu { background: var(--sn-background); color: var(--sn-ink); }
.paper-menu i { background: var(--sn-blue); }
.camera-message,
.ocr-box { color: var(--sn-ink); }
.ocr-box { border-color: var(--sn-blue); background: rgba(233, 234, 231, .9); }
.scan-result { background: rgba(233, 234, 231, .96); box-shadow: var(--sn-matte-shadow), var(--sn-matte-highlight); }
.scan-result h1,
.scan-result strong { color: var(--sn-ink); }
.scan-result .field-label,
.scan-result p { color: var(--sn-blue); }
.scan-result .button { background: var(--sn-success); }
.image-fallback { background: var(--sn-background-secondary); color: var(--sn-blue); }
.scan-result .scan-image.image-fallback,
.detail-image.image-fallback { min-height: 142px; }

.menu-row--selected { background: rgb(var(--sn-blue-rgb) / .12); }
.source-note p { color: var(--sn-blue); line-height: 1.5; }

.status--published,
.notice { color: var(--sn-success); }
.status--published { background: rgba(52, 122, 91, .18); }

@media (max-width: 700px) {
  .venue-card__scene { height: 220px; }
}