/* ============================================================
   SmartPark — Maps Pro
   Google Maps base + Linear/Vercel vivid accents.
   ============================================================ */

:root {
  /* TYPE STACKS ------------------------------------------------ */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE SCALE ------------------------------------------------ */
  --t-xs: 11px;
  --t-sm: 12.5px;
  --t-base: 14px;
  --t-md: 15px;
  --t-lg: 17px;
  --t-xl: 20px;
  --t-2xl: 26px;
  --t-3xl: 34px;
  --t-4xl: 48px;
  --t-display: 72px;

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-base: 1.45;
  --lh-loose: 1.6;

  --tr-tight: -0.03em;
  --tr-snug: -0.018em;
  --tr-base: -0.005em;
  --tr-wide: 0.02em;
  --tr-mono-label: 0.06em;

  /* SPACE ----------------------------------------------------- */
  --s-0: 0;
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 8px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 20px;
  --s-7: 24px;
  --s-8: 32px;
  --s-9: 40px;
  --s-10: 48px;
  --s-11: 64px;
  --s-12: 96px;

  /* RADIUS ---------------------------------------------------- */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-pill: 999px;

  /* ELEVATION — Google-style soft shadows --------------------- */
  --e-0: none;
  --e-1: 0 1px 2px rgba(60, 64, 67, 0.10), 0 1px 3px rgba(60, 64, 67, 0.06);
  --e-2: 0 2px 6px rgba(60, 64, 67, 0.10), 0 6px 16px rgba(60, 64, 67, 0.10);
  --e-3: 0 4px 8px rgba(60, 64, 67, 0.10), 0 12px 28px rgba(60, 64, 67, 0.16);

  /* MOTION ---------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 120ms;
  --d-base: 220ms;
  --d-slow: 380ms;

  /* DENSITY --------------------------------------------------- */
  --density: 1;
  --row-h: calc(40px * var(--density));
  --control-h: calc(40px * var(--density));
  --pad-card: calc(20px * var(--density));
}

/* ============================================================
   DRIVER · LIGHT — Maps Pro (default)
   ============================================================ */
:root,
[data-mode="driver"][data-theme="light"] {
  /* Surfaces — Google neutrals */
  --bg: #f8f9fa;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-sunken: #f1f3f4;

  /* Ink — Google text greys */
  --ink:   #202124;
  --ink-2: #3c4043;
  --ink-3: #5f6368;
  --ink-4: #80868b;

  /* Rules — Google divider greys */
  --rule: #e8eaed;
  --rule-strong: #dadce0;

  /* PRIMARY — Google Blue, the only brand color */
  --primary: #1a73e8;
  --primary-hover: #1967d2;
  --primary-ink: #ffffff;
  --primary-soft: #e8f0fe;
  --primary-soft-ink: #1967d2;

  /* ACCENT — vivid Linear/Vercel hierarchy spectrum */
  --c-blue:   #1a73e8;      /* same as primary, for parity */
  --c-blue-soft: #e8f0fe;
  --c-green:  #00b86b;      /* electric green — success */
  --c-green-soft: #e6f9ef;
  --c-amber:  #ff9500;      /* vivid amber — warning */
  --c-amber-soft: #fff4e0;
  --c-magenta:#e91e63;      /* hot magenta — accent moments */
  --c-magenta-soft: #fde8ee;
  --c-violet: #7c3aed;      /* vivid violet — info / abbonamenti */
  --c-violet-soft: #f3edff;
  --c-red:    #ea4335;      /* Google red — danger */
  --c-red-soft: #fce8e6;

  /* Semantic */
  --accent: var(--c-magenta);
  --accent-soft: var(--c-magenta-soft);
  --success: var(--c-green);
  --success-soft: var(--c-green-soft);
  --warning: var(--c-amber);
  --warning-soft: var(--c-amber-soft);
  --danger: var(--c-red);
  --danger-soft: var(--c-red-soft);
  --info: var(--c-violet);
  --info-soft: var(--c-violet-soft);

  /* Map */
  --map-paper: #f1f3f4;
  --map-road: #ffffff;
  --map-water: #aadaff;
  --map-park: #c8e6c9;
}

/* ============================================================
   DRIVER · DARK
   ============================================================ */
[data-mode="driver"][data-theme="dark"] {
  --bg: #0d0e10;
  --bg-elev: #16181c;
  --surface: #1a1c20;
  --surface-sunken: #0d0e10;
  --ink: #e8eaed;
  --ink-2: #bdc1c6;
  --ink-3: #9aa0a6;
  --ink-4: #5f6368;
  --rule: #2a2c30;
  --rule-strong: #3c4043;

  --primary: #4a8eff;
  --primary-hover: #6ba1ff;
  --primary-ink: #0d0e10;
  --primary-soft: rgba(74, 142, 255, 0.16);
  --primary-soft-ink: #a4c4ff;

  --c-blue:    #4a8eff;       --c-blue-soft: rgba(74, 142, 255, 0.16);
  --c-green:   #34d399;       --c-green-soft: rgba(52, 211, 153, 0.14);
  --c-amber:   #fbbf24;       --c-amber-soft: rgba(251, 191, 36, 0.14);
  --c-magenta: #f472b6;       --c-magenta-soft: rgba(244, 114, 182, 0.14);
  --c-violet:  #a78bfa;       --c-violet-soft: rgba(167, 139, 250, 0.14);
  --c-red:     #f87171;       --c-red-soft: rgba(248, 113, 113, 0.14);

  --accent: var(--c-magenta); --accent-soft: var(--c-magenta-soft);
  --success: var(--c-green);   --success-soft: var(--c-green-soft);
  --warning: var(--c-amber);   --warning-soft: var(--c-amber-soft);
  --danger: var(--c-red);      --danger-soft: var(--c-red-soft);
  --info: var(--c-violet);     --info-soft: var(--c-violet-soft);

  --map-paper: #1f2125;
  --map-road: #2a2c30;
  --map-water: #1a3a5c;
  --map-park: #243828;
}

/* ============================================================
   HOST · denser, slightly more sober.
   Same palette, slightly cooler surface.
   ============================================================ */
[data-mode="host"][data-theme="light"] {
  --bg: #f6f8fa;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-sunken: #eef0f3;
  --ink: #1a1d22;
  --ink-2: #3a4049;
  --ink-3: #5d6470;
  --ink-4: #828a96;
  --rule: #e3e5e8;
  --rule-strong: #d4d7dc;

  --primary: #1a73e8;
  --primary-hover: #1967d2;
  --primary-ink: #ffffff;
  --primary-soft: #e8f0fe;

  --c-blue: #1a73e8;        --c-blue-soft: #e8f0fe;
  --c-green: #00b86b;       --c-green-soft: #e6f9ef;
  --c-amber: #ff9500;       --c-amber-soft: #fff4e0;
  --c-magenta: #e91e63;     --c-magenta-soft: #fde8ee;
  --c-violet: #7c3aed;      --c-violet-soft: #f3edff;
  --c-red: #ea4335;         --c-red-soft: #fce8e6;

  --accent: var(--c-magenta); --accent-soft: var(--c-magenta-soft);
  --success: var(--c-green); --success-soft: var(--c-green-soft);
  --warning: var(--c-amber); --warning-soft: var(--c-amber-soft);
  --danger: var(--c-red);    --danger-soft: var(--c-red-soft);
  --info: var(--c-violet);   --info-soft: var(--c-violet-soft);

  --map-paper: #eef0f3;
  --map-road: #ffffff;
  --map-water: #aadaff;
  --map-park: #c8e6c9;
  --density: 0.92;
}

[data-mode="host"][data-theme="dark"] {
  --bg: #0a0c10;
  --bg-elev: #14171c;
  --surface: #181b21;
  --surface-sunken: #0a0c10;
  --ink: #e8eaed;
  --ink-2: #bdc1c6;
  --ink-3: #9aa0a6;
  --ink-4: #5f6368;
  --rule: #25282e;
  --rule-strong: #3a3d44;

  --primary: #4a8eff;
  --primary-hover: #6ba1ff;
  --primary-ink: #0d0e10;
  --primary-soft: rgba(74, 142, 255, 0.16);

  --c-blue: #4a8eff;        --c-blue-soft: rgba(74, 142, 255, 0.16);
  --c-green: #34d399;       --c-green-soft: rgba(52, 211, 153, 0.14);
  --c-amber: #fbbf24;       --c-amber-soft: rgba(251, 191, 36, 0.14);
  --c-magenta: #f472b6;     --c-magenta-soft: rgba(244, 114, 182, 0.14);
  --c-violet: #a78bfa;      --c-violet-soft: rgba(167, 139, 250, 0.14);
  --c-red: #f87171;         --c-red-soft: rgba(248, 113, 113, 0.14);

  --accent: var(--c-magenta); --accent-soft: var(--c-magenta-soft);
  --success: var(--c-green); --success-soft: var(--c-green-soft);
  --warning: var(--c-amber); --warning-soft: var(--c-amber-soft);
  --danger: var(--c-red);    --danger-soft: var(--c-red-soft);
  --info: var(--c-violet);   --info-soft: var(--c-violet-soft);

  --map-paper: #1c1f24;
  --map-road: #2a2c30;
  --map-water: #1a3a5c;
  --map-park: #243828;
  --density: 0.92;
}

/* ============================================================
   PALETTE VARIANTS — alternate brand colors
   ============================================================ */

/* Violet (Linear-like) */
[data-palette="violet"] {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-soft: #eef0ff;
}
[data-palette="violet"][data-theme="dark"] {
  --primary: #818cf8;
  --primary-soft: rgba(129, 140, 248, 0.16);
}

/* Green (focused, calm) */
[data-palette="green"] {
  --primary: #00a76f;
  --primary-hover: #018f5e;
  --primary-soft: #e0f7ee;
}
[data-palette="green"][data-theme="dark"] {
  --primary: #2dd391;
  --primary-soft: rgba(45, 211, 145, 0.16);
}

/* Red (urgent / fleet) */
[data-palette="red"] {
  --primary: #dc2626;
  --primary-hover: #b91c1c;
  --primary-soft: #fee2e2;
}

/* ============================================================
   TYPE VARIANTS
   ============================================================ */

[data-typeset="default"] {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}
[data-typeset="inter"] {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
[data-typeset="dm-sans"] {
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* DENSITY VARIANTS ------------------------------------------ */
[data-density="compact"] { --density: 0.85; }
[data-density="comfortable"] { --density: 1.12; }