/* My Way of Evangelism — design tokens (loaded first on every page).
   Built on the existing palette in styles.css; does not change colours. */
:root {
  /* Spacing (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  /* Radius */
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;
  /* Typography */
  --font-ui: 'Open Sans', 'Twemoji Country Flags', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;
  --leading-tight: 1.25; --leading-normal: 1.55;
  /* Elevation */
  --elev-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --elev-2: 0 10px 30px rgba(15,23,42,.06);
  --elev-3: 0 20px 60px rgba(15,23,42,.10);
  /* Motion */
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 360ms;
  --ease-standard: cubic-bezier(.2,0,0,1); --ease-emphasized: cubic-bezier(.3,0,0,1);
  /* Breakpoints (reference; use in media queries as literal values) */
  --bp-sm: 640px; --bp-md: 960px; --bp-lg: 1280px;
  /* Safe areas + app shell */
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 60px;
  /* Semantic aliases onto existing palette (defined in styles.css) */
  --color-primary: var(--primary, hsl(221 83% 53%));
  --color-accent: var(--gold, #e5a93c);
  --color-bg: var(--background, #f8fafc);
  --color-surface: var(--surface, #fff);
  --color-border: var(--border, #e2e8f0);
  --color-text: var(--text-primary, #0f172a);
  --color-text-muted: var(--text-muted, #64748b);
}

/* Smooth cross-page transitions (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-standard); }
::view-transition-group(mwe-tabbar) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Tap press feedback */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  a, button, [role="button"], .card, [class*="-card"] { transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast); }
  a:active, button:active, [role="button"]:active, .card:active, [class*="-card"]:active { transform: scale(.97); opacity: .9; }
}

/* Skeletons */
.skeleton { position: relative; overflow: hidden; background: var(--background-secondary, #f1f5f9); border-radius: var(--radius-sm); color: transparent !important; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: mwe-shimmer 1.2s infinite; }
.skeleton-line { height: .9em; margin: .4em 0; } .skeleton-line.short { width: 60%; }
.skeleton-card { height: 180px; border-radius: var(--radius-md); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
[data-theme="dark"] .skeleton { background: rgba(148,163,184,.14); }
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
@keyframes mwe-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* Bottom tab bar (mobile app shell) */
.mwe-tabbar { display: none; }
@media (max-width: 959.98px) {
  .mwe-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 900; left: 0; right: 0; bottom: 0;
    height: calc(var(--tabbar-h) + var(--safe-bottom)); padding: 0 env(safe-area-inset-right,0) var(--safe-bottom) env(safe-area-inset-left,0);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--color-border); box-shadow: 0 -4px 20px rgba(15,23,42,.06); view-transition-name: mwe-tabbar;
    font-family: var(--font-ui);
  }
  .mwe-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
    color: var(--color-text-muted); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .01em; position: relative; }
  .mwe-tab svg { width: 24px; height: 24px; stroke-width: 1.9; transition: transform var(--dur-base) var(--ease-emphasized); }
  .mwe-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mwe-tab[aria-current="page"] { color: var(--color-primary); }
  .mwe-tab[aria-current="page"] svg { transform: translateY(-1px) scale(1.08); stroke-width: 2.3; }
  .mwe-tab[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--color-primary); }
  .mwe-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; border-radius: var(--radius-sm); }
  body.has-mwe-tabbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
  body.has-mwe-tabbar .toast { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); }
  body.member-nav-open .mwe-tabbar { z-index: 0; }
  [data-theme="dark"] .mwe-tabbar { background: color-mix(in srgb, #0b1220 88%, transparent); border-top-color: rgba(148,163,184,.18); box-shadow: 0 -4px 20px rgba(0,0,0,.35); }
  [data-theme="dark"] .mwe-tab { color: #94a3b8; }
  [data-theme="dark"] .mwe-tab[aria-current="page"] { color: hsl(221 90% 68%); }
  [data-theme="dark"] .mwe-tab[aria-current="page"]::before { background: hsl(221 90% 68%); }
}