/* =====================================================================
   MyStoreLocator – THEME TOKENS
   Change the look of the whole app here. Accent presets: [data-accent],
   light/dark: [data-mode], density: [data-density]. Nothing else in the
   CSS uses hard-coded colours.
   ===================================================================== */
:root {
  /* brand (my-store-locator.com Brand Guidelines V1.0) – default theme */
  --brand-primary: #6545e8;
  --brand-accent: #d633a4;
  --brand-gradient: linear-gradient(110deg, #6545e8 0%, #d633a4 100%);
  --accent: #6545e8;
  --accent-600: #5536d6;
  --accent-700: #4629b8;
  --accent-50: #f4f1fe;
  --accent-100: #e8e2fd;
  --accent-contrast: #ffffff;
  --accent-text: var(--accent);            /* accent used as TEXT colour (links, active tabs) – lighter in dark mode */
  --hero-from: #6545e8;
  --hero-to: #d633a4;

  /* neutrals */
  --bg: #f7f8fc;
  --surface: #ffffff;
  --surface-2: #f9fafd;
  --surface-3: #f1f3f9;
  --border: #e6e9f2;
  --border-strong: #d5dae6;
  --text: #101b30;
  --text-2: #3b4760;
  --text-3: #5a6779;                      /* ≥ 4.5:1 on every light background incl. --accent-50/100 (WCAG AA) */
  --overlay: rgba(16, 27, 48, .45);

  /* status */
  --ok: #15803d;   --ok-bg: #ecfdf3;
  --warn: #b45309; --warn-bg: #fffaeb;
  --err: #b91c1c;  --err-bg: #fef3f2;
  --info: #2563eb; --info-bg: #eff6ff;

  /* shape (cards 12–16 px) */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 27, 48, .04);
  --shadow: 0 1px 3px rgba(16, 27, 48, .06), 0 4px 12px rgba(16, 27, 48, .04);
  --shadow-lg: 0 16px 40px rgba(16, 27, 48, .14);

  /* type */
  --font: "Inter", system-ui, Arial, sans-serif;
  --font-display: "Inter", system-ui, Arial, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;

  /* density (8-pt system, inputs ≥ 44 px) */
  --pad: 16px;
  --row-h: 48px;
  --ctrl-h: 44px;

  --sidebar-w: 256px;
  color-scheme: light;
}

/* ---- accent presets (brand = default above) ---- */
[data-accent="iris"]     { --accent:#5b55d9; --accent-600:#4b44bd; --accent-700:#3e3899; --accent-50:#f3f3ff; --accent-100:#e7e7ff; --hero-from:#4b44bd; --hero-to:#2f6f9a; --brand-gradient: linear-gradient(110deg,#4b44bd,#2f6f9a); }
[data-accent="bordeaux"] { --accent:#a21036; --accent-600:#8e0e2f; --accent-700:#760b27; --accent-50:#fbeef2; --accent-100:#f6dbe3; --hero-from:#a21036; --hero-to:#2a0410; --brand-gradient: linear-gradient(110deg, var(--hero-from), var(--hero-to)); }
[data-accent="teal"]  { --accent:#1b8079; --accent-600:#166a64; --accent-700:#12554f; --accent-50:#e9f8f6; --accent-100:#c9efe9; --hero-from:#1b8079; --hero-to:#33307a; --brand-gradient: linear-gradient(110deg, var(--hero-from), var(--hero-to)); }
[data-accent="emerald"]  { --accent:#0f8a66; --accent-600:#0c7657; --accent-700:#0a6149; --accent-50:#e8f6f1; --accent-100:#cdeee3; --hero-from:#0f8a66; --hero-to:#0b4d63; --brand-gradient: linear-gradient(110deg, var(--hero-from), var(--hero-to)); }
[data-accent="ocean"]    { --accent:#1f6fd1; --accent-600:#1a5fb4; --accent-700:#154e95; --accent-50:#ebf3fd; --accent-100:#d4e5fb; --hero-from:#1f6fd1; --hero-to:#0e3b6e; --brand-gradient: linear-gradient(110deg, var(--hero-from), var(--hero-to)); }
[data-accent="sunset"]   { --accent:#e0592a; --accent-600:#c74b20; --accent-700:#a63e1a; --accent-50:#fdf0ea; --accent-100:#fadccf; --hero-from:#e0592a; --hero-to:#8a2a52; --brand-gradient: linear-gradient(110deg, var(--hero-from), var(--hero-to)); }
[data-accent="graphite"] { --accent:#30364a; --accent-600:#262b3c; --accent-700:#1c2030; --accent-50:#eef0f5; --accent-100:#dde1ea; --hero-from:#30364a; --hero-to:#0f1220; --brand-gradient: linear-gradient(110deg, var(--hero-from), var(--hero-to)); }

[data-accent="custom"] { --accent-600: color-mix(in srgb, var(--accent) 86%, black); --accent-700: color-mix(in srgb, var(--accent) 72%, black);
  --accent-50: color-mix(in srgb, var(--accent) 8%, white); --accent-100: color-mix(in srgb, var(--accent) 18%, white);
  --hero-from: var(--accent); --hero-to: color-mix(in srgb, var(--accent) 45%, black); --brand-gradient: linear-gradient(110deg, var(--hero-from), var(--hero-to)); }

/* ---- dark mode ---- */
[data-mode="dark"] {
  --bg: #0b1222; --surface: #121a2e; --surface-2: #172036; --surface-3: #1c2640;
  --border: #25304a; --border-strong: #33405e;
  --text: #e8ebf1; --text-2: #a7b0c0; --text-3: #8a94a8;
  --accent-600: color-mix(in srgb, var(--accent) 80%, white); --accent-700: color-mix(in srgb, var(--accent) 60%, white);
  --accent-text: color-mix(in srgb, var(--accent) 65%, white);   /* ≥ 5:1 on the dark surfaces (brand violet alone: 2.7–3.2:1) */
  --accent-50: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-100: color-mix(in srgb, var(--accent) 26%, transparent);
  --ok: #4ade80; --warn: #fbbf24; --err: #f87171; --info: #60a5fa;
  --ok-bg: rgba(34,197,94,.16); --warn-bg: rgba(245,158,11,.16); --err-bg: rgba(239,68,68,.16); --info-bg: rgba(59,130,246,.16);
  --shadow: 0 1px 3px rgba(0,0,0,.4); --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ---- density ---- */
[data-density="compact"] { --pad: 12px; --row-h: 38px; --ctrl-h: 36px; --fs: 13px; }
[data-density="comfortable"] { --pad: 24px; --row-h: 56px; --ctrl-h: 48px; }

/* ---- radius style ---- */
[data-shape="sharp"] { --radius-sm: 3px; --radius: 4px; --radius-lg: 6px; --radius-xl: 8px; }
[data-shape="round"] { --radius-sm: 10px; --radius: 14px; --radius-lg: 22px; --radius-xl: 30px; }

[data-mode="dark"][data-accent="graphite"] { --accent:#aab3c8; --accent-600:#c3cadb; --accent-700:#dde2ec; --accent-contrast:#0f1220; --brand-gradient: linear-gradient(110deg, var(--hero-from), var(--hero-to)); }