/**
 * ColdBeer UI v0.1 design tokens
 * Status: candidate standard; do not wire into prototype before approval.
 */

:root {
  color-scheme: light;

  /* Color */
  --cb-color-ink: #171816;
  --cb-color-paper: #eeece5;
  --cb-color-surface: #f8f7f2;
  --cb-color-line: #c9c6bd;
  --cb-color-muted: #6c6b65;
  --cb-color-signal: #e95532;
  --cb-color-open: #2f6d50;
  --cb-color-map-neutral: #e6e4de;
  --cb-color-content: #4f504b;

  /* Typography */
  --cb-font-sans:
    Inter,
    "Helvetica Neue",
    "Noto Sans TC",
    "PingFang TC",
    Arial,
    sans-serif;
  --cb-font-mono: "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace;

  --cb-type-display-size: 37px;
  --cb-type-display-line: 0.91;
  --cb-type-display-weight: 750;
  --cb-type-display-tracking: -0.067em;

  --cb-type-title-l-size: 27px;
  --cb-type-title-l-line: 0.96;
  --cb-type-title-l-weight: 760;
  --cb-type-title-l-tracking: -0.06em;

  --cb-type-title-m-size: 19px;
  --cb-type-title-m-line: 1.18;
  --cb-type-title-m-weight: 750;
  --cb-type-title-m-tracking: -0.035em;

  --cb-type-body-size: 13px;
  --cb-type-body-line: 1.54;
  --cb-type-body-weight: 500;
  --cb-type-body-s-size: 12px;
  --cb-type-body-s-line: 1.42;
  --cb-type-caption-min-size: 11px;
  --cb-type-label-size: 11px;
  --cb-type-label-line: 1.3;
  --cb-type-mono-size: 11px;
  --cb-type-mono-line: 1.34;
  --cb-type-mono-tracking: 0.08em;

  /* Spacing and layout */
  --cb-space-1: 4px;
  --cb-space-2: 8px;
  --cb-space-3: 12px;
  --cb-space-4: 16px;
  --cb-space-content: 18px;
  --cb-space-6: 24px;
  --cb-space-8: 32px;
  --cb-gutter-map: 12px;
  --cb-gutter-content: 18px;
  --cb-screen-reference-width: 393px;
  --cb-screen-reference-height: 852px;

  /* Shape and line */
  --cb-stroke-hairline: 1px;
  --cb-stroke-selected: 3px;
  --cb-radius-none: 0;
  --cb-radius-control: 3px;
  --cb-radius-card: 4px;
  --cb-radius-sheet: 7px;
  --cb-radius-round: 999px;
  --cb-shadow-marker: 0 2px 1px rgb(23 24 22 / 22%);

  /* Controls and shell */
  --cb-size-tap-min: 48px;
  --cb-size-icon: 21px;
  --cb-size-status-reference: 34px;
  --cb-size-topbar: 54px;
  --cb-size-tabbar-content: 70px;
  --cb-size-locate: 48px;
  --cb-size-action: 48px;
  --cb-size-navigation: 52px;
  --cb-size-store-row: 56px;

  /* Native safe areas */
  --cb-safe-top: env(safe-area-inset-top, 0px);
  --cb-safe-right: env(safe-area-inset-right, 0px);
  --cb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cb-safe-left: env(safe-area-inset-left, 0px);
  --cb-size-tabbar: calc(var(--cb-size-tabbar-content) + var(--cb-safe-bottom));

  /* Reference map viewport insets for 393 × 852.
   * Production must replace overlay-dependent values with measured heights.
   */
  --cb-map-inset-top: 88px;
  --cb-map-inset-right: 12px;
  --cb-map-inset-left: 12px;
  --cb-map-inset-bottom-default: 82px;
  --cb-map-inset-bottom-poi-card: 340px;
  --cb-map-inset-bottom-venue-sheet: 560px;

  /* Motion */
  --cb-duration-fast: 160ms;
  --cb-duration-overlay: 220ms;
  --cb-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layers */
  --cb-z-map: 0;
  --cb-z-marker: 10;
  --cb-z-control: 20;
  --cb-z-overlay: 30;
  --cb-z-navigation: 40;
  --cb-z-modal: 50;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cb-duration-fast: 0ms;
    --cb-duration-overlay: 0ms;
  }
}