/* Truly mockups — brand tokens from docs/brand-theme-ai.md */

:root,
[data-theme="light"] {
  --color-primary: #e5a000;
  --color-on-primary: #ffffff;
  --color-primary-container: #fff4d6;
  --color-on-primary-container: #1a1a1a;
  --color-secondary: #5c5c5c;
  --color-on-secondary: #ffffff;
  --color-background: #fafaf8;
  --color-on-background: #1a1a1a;
  --color-surface: #ffffff;
  --color-on-surface: #1a1a1a;
  --color-surface-variant: #f0ede6;
  --color-on-surface-variant: #5c5c5c;
  --color-outline: #e8c89a;
  --color-error: #b3261e;

  --map-land: #f3efe6;
  --map-water: #d4e4ea;
  --map-park: #dde8c8;
  --map-road: #ffffff;
  --map-road-major: #f0ebe3;
  --map-label: #8a8578;
  --shadow-soft: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.06);
  --shadow-pin: 0 2px 8px rgba(26, 26, 26, 0.14);
}

[data-theme="dark"] {
  --color-primary: #e8c547;
  --color-on-primary: #1a1a1a;
  --color-primary-container: #3d3520;
  --color-on-primary-container: #e8c547;
  --color-secondary: #b0b0b0;
  --color-on-secondary: #121212;
  --color-background: #121212;
  --color-on-background: #f5f5f0;
  --color-surface: #1e1e1e;
  --color-on-surface: #f5f5f0;
  --color-surface-variant: #2a2a2a;
  --color-on-surface-variant: #b0b0b0;
  --color-outline: #4a4a4a;
  --color-error: #f2b8b5;

  --map-land: #1a1a18;
  --map-water: #1a2830;
  --map-park: #1e2a1c;
  --map-road: #252522;
  --map-road-major: #2e2e2a;
  --map-label: #6e6e66;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.4);
  --shadow-pin: 0 2px 10px rgba(0, 0, 0, 0.45);
}

:root {
  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "Figtree", "Segoe UI", sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --toolbar-h: 64px;
}

/* ---------------------------------------------------------------------------
   Mock-only controls — NOT product UI.
   Use to switch alternate states inside one HTML mockup file.
   --------------------------------------------------------------------------- */
.mock-state {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px 10px;
  border: 1.5px dashed color-mix(in srgb, var(--color-on-surface-variant) 55%, transparent);
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      color-mix(in srgb, var(--color-on-surface-variant) 6%, transparent) 4px,
      color-mix(in srgb, var(--color-on-surface-variant) 6%, transparent) 5px
    ),
    color-mix(in srgb, var(--color-surface) 88%, var(--color-on-surface-variant));
}

.mock-state-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  line-height: 1.2;
}

.mock-state-label::before {
  content: "◇ ";
}

.mock-state-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 3px;
  border-radius: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-outline);
}

.mock-state-switch button {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
  color: var(--color-on-surface-variant);
}

.mock-state-switch button.is-on {
  background: var(--color-surface-variant);
  color: var(--color-on-surface);
  box-shadow: var(--shadow-soft);
}