/* RenTour — base: reset, variables, typography, global utilities */

:root {
  /* Brand — green primary (RenTour), mapped to “accent” slots from DESIGN.md */
  --palette-bg-primary-core: #0d9488;
  --palette-bg-primary-core-hover: #0f766e;
  --palette-bg-primary-core-pressed: #115e59;
  --palette-bg-primary-soft: #ccfbf1;
  --palette-bg-primary-soft-border: #99f6e4;

  --palette-text-primary: #222222;
  --palette-text-secondary: #6a6a6a;
  --palette-text-focused: #3f3f3f;
  --palette-border: #dddddd;
  --palette-surface-muted: #f7f7f7;
  --palette-surface-pill: #f2f2f2;

  --color-primary: var(--palette-bg-primary-core);
  --color-primary-dark: var(--palette-bg-primary-core-hover);
  --color-primary-soft: var(--palette-bg-primary-soft);
  --color-text: var(--palette-text-primary);
  --color-text-muted: var(--palette-text-secondary);
  --color-border: var(--palette-border);
  --color-bg: #ffffff;
  --color-bg-soft: var(--palette-surface-muted);

  /* Airbnb-style elevation (three-layer) */
  --shadow-card:
    rgba(0, 0, 0, 0.02) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.04) 0px 2px 6px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px;
  --shadow-hover: rgba(0, 0, 0, 0.08) 0px 4px 12px;
  --shadow-topbar: 0 1px 0 rgba(0, 0, 0, 0.06);

  --radius-xs: 8px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius: 20px;
  --radius-lg: 32px;

  --font: Circular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bottom-nav-h: 56px;
  --topbar-h: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility */
.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-sm {
  font-size: 0.875rem;
}