/**
 * Pampered Paws Design System — Tokens
 * Single source of truth for color, type, spacing, motion.
 */
:root {
  /* Brand — aligned with login / marketing green */
  --pp-brand-50: #f0fdf4;
  --pp-brand-100: #dcfce7;
  --pp-brand-200: #bbf7d0;
  --pp-brand-300: #86efac;
  --pp-brand-400: #4ade80;
  --pp-brand-500: #22c55e;
  --pp-brand-600: #16a34a;
  --pp-brand-700: #15803d;
  --pp-brand-800: #166534;
  --pp-brand-900: #14532d;

  /* Semantic aliases (used by components + compat layer) */
  --pp-primary: var(--pp-brand-500);
  --pp-primary-hover: var(--pp-brand-600);
  --pp-primary-soft: var(--pp-brand-100);
  --pp-primary-ring: rgba(34, 197, 94, 0.35);

  --pp-success: #10b981;
  --pp-success-soft: #ecfdf5;
  --pp-warning: #f59e0b;
  --pp-warning-soft: #fffbeb;
  --pp-danger: #ef4444;
  --pp-danger-soft: #fef2f2;
  --pp-info: #3b82f6;
  --pp-info-soft: #eff6ff;

  /* Neutrals */
  --pp-ink: #0f172a;
  --pp-ink-secondary: #334155;
  --pp-muted: #64748b;
  --pp-muted-light: #94a3b8;
  --pp-border: #e2e8f0;
  --pp-border-strong: #cbd5e1;
  --pp-surface: #ffffff;
  --pp-surface-raised: #ffffff;
  --pp-bg: #f8fafc;
  --pp-bg-subtle: #f1f5f9;

  /* Typography */
  --pp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pp-font-display: 'Inter', var(--pp-font);
  --pp-text-xs: 0.75rem;
  --pp-text-sm: 0.875rem;
  --pp-text-base: 1rem;
  --pp-text-lg: 1.125rem;
  --pp-text-xl: 1.25rem;
  --pp-text-2xl: 1.5rem;
  --pp-text-3xl: 1.875rem;
  --pp-leading: 1.6;
  --pp-tracking-tight: -0.02em;

  /* Spacing scale */
  --pp-space-1: 0.25rem;
  --pp-space-2: 0.5rem;
  --pp-space-3: 0.75rem;
  --pp-space-4: 1rem;
  --pp-space-5: 1.25rem;
  --pp-space-6: 1.5rem;
  --pp-space-8: 2rem;
  --pp-space-10: 2.5rem;
  --pp-space-12: 3rem;

  /* Radii */
  --pp-radius-sm: 8px;
  --pp-radius: 12px;
  --pp-radius-lg: 16px;
  --pp-radius-xl: 20px;
  --pp-radius-2xl: 24px;
  --pp-radius-full: 9999px;

  /* v4.1 soft surfaces */
  --pp-surface-soft: #f5f5f7;
  --pp-cta: #0f172a;
  --pp-cta-hover: #1e293b;

  /* v4.2 Glass Shell — base (Velaris overrides in glass-velaris.css) */
  --pp-radius-3xl: 32px;
  --pp-bg-gradient: linear-gradient(145deg, #fdf4ff 0%, #fff7ed 38%, #f0f9ff 100%);
  --pp-glass: rgba(255, 255, 255, 0.72);
  --pp-glass-strong: rgba(255, 255, 255, 0.88);
  --pp-glass-border: rgba(255, 255, 255, 0.65);
  --pp-glass-rim: rgba(255, 255, 255, 0.95);
  --pp-glass-blur: blur(20px);
  --pp-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.03);
  --pp-glass-accent: #c9a962;
  --pp-glass-accent-soft: rgba(201, 169, 98, 0.22);
  --pp-float-nav-bg: rgba(15, 23, 42, 0.94);
  --pp-float-nav-width: min(calc(100% - 32px), 420px);
  --pp-tile-sky: #e0f2fe;
  --pp-tile-sky-accent: #0ea5e9;
  --pp-tile-mint: #d1fae5;
  --pp-tile-mint-accent: #10b981;
  --pp-tile-lavender: #ede9fe;
  --pp-tile-lavender-accent: #8b5cf6;
  --pp-tile-peach: #ffedd5;
  --pp-tile-peach-accent: #f97316;
  --pp-tile-yellow: #fef9c3;
  --pp-tile-yellow-accent: #eab308;
  --pp-tile-rose: #ffe4e6;
  --pp-tile-rose-accent: #f43f5e;

  /* Elevation */
  --pp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --pp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --pp-shadow-soft: 0 2px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --pp-shadow: 0 4px 12px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
  --pp-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.05);
  --pp-shadow-sheet: 0 -8px 40px rgba(15, 23, 42, 0.12);
  --pp-shadow-glow: 0 8px 20px -6px rgba(15, 23, 42, 0.2);
  --pp-shadow-brand: 0 8px 24px rgba(34, 197, 94, 0.25);

  /* Bottom nav */
  --pp-bottom-nav-height: 64px;
  --pp-bottom-nav-safe: calc(var(--pp-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 12px);

  /* Motion */
  --pp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pp-duration: 180ms;
  --pp-duration-slow: 320ms;

  /* Layout */
  --pp-max-width: 1400px;
  --pp-topbar-height: 72px;
  --pp-shell-gap: 24px;
  --pp-shell-max: 1280px;
  --pp-section-gap: 20px;

  /* Focus */
  --pp-focus-ring: 0 0 0 3px var(--pp-primary-ring);

  /* Legacy dashboard aliases (compat) */
  --primary: var(--pp-primary);
  --primary-dark: var(--pp-primary-hover);
  --secondary: var(--pp-brand-700);
  --success: var(--pp-success);
  --warning: var(--pp-warning);
  --danger: var(--pp-danger);
  --text-primary: var(--pp-ink);
  --text-secondary: var(--pp-muted);
  --bg-primary: var(--pp-bg);
  --bg-card: var(--pp-surface);
  --border: var(--pp-border);
  --shadow-sm: var(--pp-shadow-xs);
  --shadow: var(--pp-shadow-sm);
  --shadow-lg: var(--pp-shadow-lg);
  --radius: var(--pp-radius-lg);
  --radius-sm: var(--pp-radius);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pp-duration: 0ms;
    --pp-duration-slow: 0ms;
  }
}