/* ========================================================================== */
/* TrailPlanner Design System — base.css                                      */
/* Global tokens, typography, spacing, radius, shadows, z-index, print base    */
/* ========================================================================== */

:root {
  /* Brand */
  --color-brand-50:#eef2ff; --color-brand-100:#e0e7ff; --color-brand-200:#c7d2fe; --color-brand-300:#a5b4fc; --color-brand-400:#818cf8; --color-brand-500:#6366f1; --color-brand-600:#4f46e5; --color-brand-700:#4338ca; --color-brand-800:#3730a3; --color-brand-900:#312e81;
  --color-accent-50:#f5f3ff; --color-accent-100:#ede9fe; --color-accent-200:#ddd6fe; --color-accent-300:#c4b5fd; --color-accent-400:#a78bfa; --color-accent-500:#8b5cf6; --color-accent-600:#7c3aed; --color-accent-700:#6d28d9;

  /* Neutrals */
  --color-slate-0:#fff; --color-slate-25:#fcfcfd; --color-slate-50:#f8fafc; --color-slate-100:#f1f5f9; --color-slate-200:#e2e8f0; --color-slate-300:#cbd5e1; --color-slate-400:#94a3b8; --color-slate-500:#64748b; --color-slate-600:#475569; --color-slate-700:#334155; --color-slate-800:#1e293b; --color-slate-900:#0f172a; --color-slate-950:#020617;

  /* Semantic */
  --color-success-50:#ecfdf5; --color-success-100:#d1fae5; --color-success-600:#059669; --color-success-700:#047857;
  --color-warning-50:#fffbeb; --color-warning-100:#fef3c7; --color-warning-500:#f59e0b; --color-warning-600:#d97706; --color-warning-700:#b45309;
  --color-danger-50:#fef2f2; --color-danger-100:#fee2e2; --color-danger-600:#dc2626; --color-danger-700:#b91c1c;
  --color-info-50:#eff6ff; --color-info-100:#dbeafe; --color-info-600:#2563eb;

  /* Surfaces */
  --color-page-bg:var(--color-slate-50); --color-surface:var(--color-slate-0); --color-surface-muted:var(--color-slate-25); --color-surface-hover:#f8fbff;
  --color-border-subtle:var(--color-slate-200); --color-border-strong:var(--color-slate-300); --color-border-focus:var(--color-brand-500);
  --color-text-primary:var(--color-slate-900); --color-text-secondary:var(--color-slate-600); --color-text-muted:var(--color-slate-500); --color-text-inverse:#fff; --color-text-brand:var(--color-brand-700);

  /* Existing app.css aliases */
  --bg:var(--color-page-bg); --card:var(--color-surface); --border:var(--color-border-subtle); --text:var(--color-text-primary); --muted:var(--color-text-muted); --orange:var(--color-brand-600); --blue:var(--color-info-600); --purple:var(--color-accent-600); --green:var(--color-success-600); --red:var(--color-danger-600);
  --tp-card:var(--color-surface); --tp-border:var(--color-border-subtle); --tp-blue:var(--color-brand-900); --tp-orange:var(--color-brand-600); --tp-orange-dark:var(--color-brand-700); --tp-muted:var(--color-text-muted); --tp-shadow:0 8px 24px rgb(15 23 42 / .08);

  /* Type */
  --font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --fs-xs:clamp(.75rem,.72rem + .12vw,.8125rem); --fs-sm:clamp(.8125rem,.78rem + .15vw,.875rem); --fs-md:clamp(.9375rem,.9rem + .15vw,1rem); --fs-lg:clamp(1.0625rem,1rem + .3vw,1.1875rem); --fs-xl:clamp(1.25rem,1.1rem + .7vw,1.5rem); --fs-2xl:clamp(1.5rem,1.25rem + 1vw,2rem); --fs-3xl:clamp(1.875rem,1.4rem + 2vw,2.75rem);
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:850;
  --lh-tight:1.12; --lh-snug:1.25; --lh-normal:1.5; --letter-tight:-.025em; --letter-wide:.02em; --letter-wider:.06em;

  /* Space */
  --space-0:0; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --page-x:clamp(1rem,2vw,1.75rem); --page-y:clamp(1rem,2vw,1.625rem); --section-gap:clamp(1rem,2vw,1.5rem); --layout-gutter:24px;

  /* Radius */
  --radius-xs:.25rem; --radius-sm:.375rem; --radius-md:.625rem; --radius-lg:.875rem; --radius-xl:1.125rem; --radius-2xl:1.5rem; --radius-pill:999px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgb(15 23 42 / .05); --shadow-sm:0 1px 3px rgb(15 23 42 / .08),0 1px 2px rgb(15 23 42 / .04); --shadow-md:0 8px 24px rgb(15 23 42 / .08); --shadow-lg:0 16px 40px rgb(15 23 42 / .12); --shadow-inner:inset 0 1px 0 rgb(255 255 255 / .65);

  /* Motion / z-index / layout */
  --transition-fast:120ms ease; --transition-base:180ms ease; --transition-slow:260ms ease;
  --z-base:1; --z-sticky:20; --z-dropdown:50; --z-modal:100; --z-toast:200;
  --container-max:1500px; --header-height:64px; --table-cell-y:.875rem; --table-cell-x:.625rem; --table-header-bg:var(--color-slate-100); --table-row-hover:#f8fbff;
  --focus-ring:0 0 0 3px rgb(99 102 241 / .26),0 0 0 1px rgb(79 70 229 / .86);
}

*{box-sizing:border-box} html{text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:var(--fs-md);color:var(--color-text-primary);background:radial-gradient(circle at top left,rgb(99 102 241 / .08),transparent 34rem),linear-gradient(180deg,#fff 0%,var(--color-page-bg) 100%)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
button,input,select,textarea{font:inherit} button:disabled,[aria-disabled="true"]{cursor:not-allowed}
.app-width,.page{width:min(var(--container-max),calc(100vw - (var(--layout-gutter) * 2)));max-width:var(--container-max)!important;margin-inline:auto}
.page{padding:var(--page-y) 0 var(--space-10)!important}
.app-header{padding:var(--space-3) 0!important}
.stack{display:grid;gap:var(--section-gap)} .cluster{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center} .split{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)} .text-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .text-muted{color:var(--color-text-muted)}

@media (max-width:768px){:root{--layout-gutter:12px}}
@media print{ :root{--color-page-bg:#fff;--color-surface:#fff;--color-text-primary:#000;--color-text-secondary:#333;--color-border-subtle:#ccc;--shadow-xs:none;--shadow-sm:none;--shadow-md:none;--shadow-lg:none} body{background:#fff;color:#000}.no-print,.btn,.button,nav,aside{display:none!important}.page{width:100%;max-width:none!important;padding:0!important}a{color:inherit;text-decoration:none}}