/*
 * Coffee Token UI system
 * Shared typography, color, control and icon rules for every first-party page.
 */
:root {
  --ui-canvas: #f6f2e8;
  --ui-panel: #ecebe1;
  --ui-panel-strong: #e2e6dc;
  --ui-ink: #172019;
  --ui-muted: #4f5c53;
  --ui-line: #bcc6bc;
  --ui-accent: #67dc8a;
  --ui-accent-ink: #0d321b;
  --ui-danger: #9a332f;
  --ui-icon-tile: #faedcd;
  --ui-radius-control: .7rem;
  --ui-radius-panel: 1rem;
  --ui-shadow: 0 1.4rem 4rem rgb(23 32 25 / .09);
  --ui-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ui-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
}

* { text-rendering: optimizeLegibility; }
body { font-size: 16px; line-height: 1.6; }
button, input, select, textarea { font-size: max(16px, 1em); }
button, a, summary { transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease, opacity 180ms ease; }
button:active, a[role="button"]:active { transform: translateY(1px) scale(.99); }
:focus-visible { outline: 3px solid rgb(36 128 65 / .34) !important; outline-offset: 3px; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
code, .metric strong, .ledger-metrics strong, .history-value { font-variant-numeric: tabular-nums; }

.brand-mark,
.wordmark > span {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--ui-icon-tile);
  box-shadow: 0 8px 22px rgb(23 32 25 / .08);
}

.button[data-icon]::before,
.dialog-close[data-icon]::before,
.toolbar [data-icon]::before,
[data-icon].icon-on-dark::before {
  border-radius: .38rem;
  background-color: var(--ui-icon-tile);
}

/* Guest page */
.page-guest {
  --paper: var(--ui-canvas);
  --paper-deep: var(--ui-panel-strong);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --accent: var(--ui-accent);
  --accent-dark: var(--ui-accent-ink);
  --danger: var(--ui-danger);
}
.page-guest .shell { grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); }
.page-guest h1 { max-width: 9em; font-size: clamp(46px, 6vw, 72px); line-height: .98; }
.page-guest .lede { max-width: 34em; font-size: clamp(16px, 1.55vw, 18px); line-height: 1.7; }
.page-guest .venue-line,
.page-guest .service-state,
.page-guest .brand,
.page-guest .journey span,
.page-guest .helper,
.page-guest .warning,
.page-guest .quota-note,
.page-guest .meta-label,
.page-guest .credential-block label,
.page-guest .setup-fields span,
.page-guest .setup-note p,
.page-guest .text-link,
.page-guest .site-footer { font-size: 13px; }
.page-guest .section-index,
.page-guest .journey b { font-size: 12px; }
.page-guest .pass-meta strong { font-size: 16px; }
.page-guest .guide-heading p { font-size: 15px; }
.page-guest .setup-note b { font-size: 15px; }
.page-guest .setup-fields code,
.page-guest pre { font-size: 12.5px; }
.page-guest .code-box button { font-size: 12.5px; }
.page-guest .primary-button,
.page-guest .secondary-button,
.page-guest .copy-button { border-radius: var(--ui-radius-control); font-size: 14px; }

/* Partner page */
.page-partner {
  --paper: var(--ui-canvas);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --panel: var(--ui-panel);
  --accent: var(--ui-accent);
  --accent-ink: var(--ui-accent-ink);
  --danger: var(--ui-danger);
}
.page-partner .hero { min-height: 58dvh; padding-block: 76px 92px; }
.page-partner .hero h1 { max-width: 11em; font-size: clamp(46px, 7vw, 80px); line-height: .98; }
.page-partner .hero > p:not(.eyebrow) { max-width: 38em; font-size: clamp(16px, 1.6vw, 18px); }
.page-partner .eyebrow,
.page-partner .step { font-size: 12px; }
.page-partner .hero-note,
.page-partner .section-copy > p,
.page-partner label,
.page-partner .qr-card span,
.page-partner .secret-card p,
.page-partner .dialog-card > p:not(.eyebrow),
.page-partner .ledger-table,
.page-partner footer { font-size: 14px; }
.page-partner .legal,
.page-partner label small,
.page-partner .ledger-heading p,
.page-partner .ledger-metrics span,
.page-partner .ledger-metrics small,
.page-partner .date-control input,
.page-partner .history-panel summary,
.page-partner .retention-note { font-size: 12.5px; }
.page-partner .section-copy h2 { font-size: clamp(32px, 4vw, 48px); }
.page-partner input,
.page-partner textarea,
.page-partner .primary-button,
.page-partner .secondary-button { border-radius: var(--ui-radius-control); }
.page-partner .qr-card,
.page-partner .secret-card,
.page-partner .edit-panel,
.page-partner .ledger-panel,
.page-partner dialog { border-radius: var(--ui-radius-panel); }

/* Poster designer. Poster artwork keeps template-specific typography. */
.page-poster {
  --muted: #bdc8c0;
  --line: #3c4740;
  --accent: #67dc8a;
}
.page-poster .brand,
.page-poster .template-button,
.page-poster .tool-button { font-size: 14px; }
.page-poster .template-button,
.page-poster .tool-button { min-height: 44px; border-radius: var(--ui-radius-control); }
.page-poster .eyebrow { font-size: 12px; }
.page-poster .workspace-copy h1 { max-width: 9em; font-size: clamp(34px, 3.8vw, 46px); }
.page-poster .workspace-copy > p:not(.eyebrow):not(.status) { font-size: 15px; line-height: 1.7; }
.page-poster .current-venue span,
.page-poster .current-venue code,
.page-poster .current-venue p,
.page-poster .status { font-size: 13px; }

/* Operations console */
.page-admin {
  --surface: var(--ui-canvas);
  --surface-raised: var(--ui-panel);
  --surface-strong: var(--ui-panel-strong);
  --text: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --accent: var(--ui-accent);
  --accent-text: var(--ui-accent-ink);
  --danger: var(--ui-danger);
  --radius: var(--ui-radius-panel);
}
.page-admin .brand,
.page-admin .button { font-size: 14px; }
.page-admin .section-label,
.page-admin th { font-size: 12px; }
.page-admin label,
.page-admin .field-help,
.page-admin .panel-heading p,
.page-admin .operations p,
.page-admin .pass-toolbar p,
.page-admin .history-heading p,
.page-admin .metric span,
.page-admin .metric small,
.page-admin .wifi-copy > p:not(.section-label),
.page-admin .model-group-copy > p:not(.section-label),
.page-admin .dashboard-footer,
.page-admin .history-row,
.page-admin .issued-meta { font-size: 13px; }
.page-admin table { font-size: 14px; }
.page-admin td code,
.page-admin .copy-row input,
.page-admin .status,
.page-admin .table-action,
.page-admin .token-cell small { font-size: 12.5px; }
.page-admin input,
.page-admin select,
.page-admin textarea { min-height: 46px; border-radius: var(--ui-radius-control); }
.page-admin .button { min-height: 42px; border-radius: var(--ui-radius-control); }
.page-admin .metric { padding: 22px; }

@media (prefers-color-scheme: dark) {
  .page-admin {
    --surface: #111713;
    --surface-raised: #19211b;
    --surface-strong: #243027;
    --text: #f0f4ef;
    --muted: #b5c0b7;
    --line: #3b493f;
    --accent: #72e596;
    --accent-text: #0b2b17;
    --danger: #ff9d97;
  }
}

@media (max-width: 820px) {
  .page-guest .shell { grid-template-columns: 1fr; }
  .page-guest h1 { font-size: clamp(44px, 11vw, 64px); }
  .page-partner .hero { min-height: auto; padding-block: 68px 82px; }
  .page-partner .hero h1 { font-size: clamp(44px, 10vw, 64px); }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .brand-mark,
  .wordmark > span { width: 38px; height: 38px; border-radius: 11px; }
  .page-guest h1 { font-size: clamp(36px, 11.5vw, 44px); }
  .page-guest .brand { font-size: 10px; }
  .page-guest .service-state { font-size: 10px; }
  .page-partner .hero h1 { font-size: 46px; }
  .page-poster .brand { font-size: 13px; }
  .page-admin .topbar-actions .button { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}