/* ==========================================================================
   My Places — design tokens
   Plain CSS custom properties. No build step, no framework.
   Include this file before mp-components.css.
   ========================================================================== */

:root {
  --brand-500: #6d4de0;
  --brand-600: #5b3cc4;
  --brand-tint-bg: #eee9fb;
  --brand-tint-text: #4a2fae;

  --cat-sightseeing-bg: #e6f1fb;
  --cat-sightseeing-text: #0c447c;
  --cat-sightseeing-solid: #378add;

  --cat-hotel-bg: #f3ecfb;
  --cat-hotel-text: #5b3495;
  --cat-hotel-solid: #8b5cf6;

  --cat-transit-bg: #e1f5ee;
  --cat-transit-text: #085041;
  --cat-transit-solid: #1d9e75;

  --cat-food-bg: #faeeda;
  --cat-food-text: #633806;
  --cat-food-solid: #ef9f27;

  --cat-shopping-bg: #fbeaf0;
  --cat-shopping-text: #72243e;
  --cat-shopping-solid: #d4537e;

  --cat-home-bg: #eaf3de;
  --cat-home-text: #27500a;
  --cat-home-solid: #639922;

  --cat-other-bg: #f1efe8;
  --cat-other-text: #444441;
  --cat-other-solid: #888780;

  --success-bg: #eaf3de;
  --success-text: #27500a;
  --success-solid: #3b8d0f;

  --danger-bg: #fcebeb;
  --danger-text: #791f1f;
  --danger-solid: #e24b4a;

  --surface-0: #f6f5f2;
  --surface-1: #fbfaf8;
  --surface-2: #ffffff;

  --text-primary: #1c1b19;
  --text-secondary: #5f5e5a;
  --text-muted: #8a8983;

  --border: rgba(28, 27, 25, 0.12);
  --border-strong: rgba(28, 27, 25, 0.22);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 24px;

  --control-height: 40px;
  --tap-target-min: 44px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --font-size-caption: 12px;
  --font-size-footnote: 13px;
  --font-size-body: 15px;
  --font-size-heading: 18px;
  --font-size-title: 22px;

  --shadow-sm: 0 1px 2px rgba(28, 27, 25, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 27, 25, 0.10);

  --dur-fast: 100ms;
  --dur-base: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: #17161a;
    --surface-1: #201f24;
    --surface-2: #27262b;

    --text-primary: #f2f1ee;
    --text-secondary: #b7b6b1;
    --text-muted: #85847e;

    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);

    --brand-tint-bg: #2c2650;
    --brand-tint-text: #c3b4f7;

    --cat-sightseeing-bg: #10263c;   --cat-sightseeing-text: #85b7eb;
    --cat-hotel-bg: #2c2245;         --cat-hotel-text: #c4b5fd;
    --cat-transit-bg: #0d2b23;       --cat-transit-text: #5dcaa5;
    --cat-food-bg: #3a2708;          --cat-food-text: #fac775;
    --cat-shopping-bg: #3a1626;      --cat-shopping-text: #ed93b1;
    --cat-home-bg: #1e2c0f;          --cat-home-text: #97c459;
    --cat-other-bg: #2c2c2a;         --cat-other-text: #b4b2a9;

    --success-bg: #1e2c0f; --success-text: #97c459;
    --danger-bg: #3a1414;  --danger-text: #f09595;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.40);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}