/* ──────────────────────────────────────────────────────────────────────
   Public sites · Design tokens
   ----------------------------------------------------------------------
   Shared design system for all public-facing MyMaps sites.
   Link this stylesheet FIRST in any public template, then layer the
   site-specific stylesheet on top.

   Naming: --pb-* ("public base") to avoid collisions with site-specific
   custom properties (e.g. --kdem-* / --bf-*).
   ────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Typography ─────────────────────────────────────────────────── */
  --pb-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pb-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Neutral palette (slate, off-black — NO pure #000) ──────────── */
  --pb-bg:           #ffffff;
  --pb-surface:      #f8fafc;        /* slate-50  · soft section bg */
  --pb-surface-2:    #f1f5f9;        /* slate-100 · raised section bg */
  --pb-divider:      #e2e8f0;        /* slate-200 · hairline */
  --pb-border:       #cbd5e1;        /* slate-300 · stronger edge */

  --pb-text:         #0f172a;        /* slate-900 · primary body */
  --pb-text-soft:    #475569;        /* slate-600 · secondary */
  --pb-text-muted:   #64748b;        /* slate-500 · captions, helper */
  --pb-text-faint:   #94a3b8;        /* slate-400 · faint, never on white */

  /* ── Accent (single, desaturated, < 80% saturation) ─────────────── */
  /* Sites override --pb-accent on their root selector. Default = teal. */
  --pb-accent:        #0f766e;       /* teal-700 */
  --pb-accent-soft:   #ccfbf1;       /* teal-100 */
  --pb-accent-bg:     #f0fdfa;       /* teal-50 */
  --pb-accent-ink:    #134e4a;       /* teal-900 · text on accent-soft */

  /* ── Status (used sparingly) ───────────────────────────────────── */
  --pb-success:      #15803d;
  --pb-warning:      #b45309;
  --pb-danger:       #b91c1c;
  --pb-info:         #1d4ed8;

  /* ── Spacing scale (4px base) ─────────────────────────────────── */
  --pb-space-1:  4px;
  --pb-space-2:  8px;
  --pb-space-3:  12px;
  --pb-space-4:  16px;
  --pb-space-5:  24px;
  --pb-space-6:  32px;
  --pb-space-7:  48px;
  --pb-space-8:  64px;
  --pb-space-9:  96px;

  /* ── Radius ───────────────────────────────────────────────────── */
  --pb-radius-sm:   4px;
  --pb-radius-md:   8px;
  --pb-radius-lg:   12px;
  --pb-radius-xl:   16px;
  --pb-radius-2xl:  24px;

  /* ── Elevation (tinted to neutral hue, never neon glow) ────────── */
  --pb-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --pb-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  --pb-shadow-md:  0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --pb-shadow-lg:  0 16px 40px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.05);

  /* Inner highlight (matches "Liquid Glass" refraction principle) */
  --pb-shadow-inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ── Motion ──────────────────────────────────────────────────── */
  --pb-ease:       cubic-bezier(0.16, 1, 0.3, 1);   /* easeOutExpo · primary */
  --pb-ease-out:   cubic-bezier(0.33, 1, 0.68, 1);
  --pb-ease-in:    cubic-bezier(0.55, 0, 0.65, 1);
  --pb-dur-fast:   150ms;
  --pb-dur:        250ms;
  --pb-dur-slow:   400ms;

  /* ── Focus ring ──────────────────────────────────────────────── */
  --pb-focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.35);

  /* ── Typography scale (compose with weight, not just size) ────── */
  --pb-text-2xs:    11px;
  --pb-text-xs:     12px;
  --pb-text-sm:     14px;
  --pb-text-base:   16px;
  --pb-text-lg:     18px;
  --pb-text-xl:     22px;
  --pb-text-2xl:    28px;
  --pb-text-3xl:    36px;
  --pb-text-4xl:    48px;
  --pb-text-5xl:    64px;

  /* Letter-spacing (display headings tighten, eyebrow labels track) */
  --pb-tracking-tight:   -0.02em;
  --pb-tracking-normal:  0;
  --pb-tracking-eyebrow: 0.12em;
}

/* ── Apply font + smoothing globally ─────────────────────────────── */

html {
  font-family: var(--pb-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--pb-text);
}

/* Tabular numbers utility — use on any numeric column or metric */
.pb-tnum {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Mono utility — for IDs, codes, coordinates, timestamps */
.pb-mono {
  font-family: var(--pb-font-mono);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Eyebrow label utility — small, uppercase, tracked */
.pb-eyebrow {
  font-size: var(--pb-text-xs);
  font-weight: 600;
  letter-spacing: var(--pb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pb-text-muted);
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}