/**
 * Volunteer design tokens and base styles.
 * Single source of truth for brand, spacing, typography. Used by:
 * - dashboard.css (imports this, then adds component styles)
 * - account hub, certificate display, edit profile (load this instead of full dashboard)
 *
 * Viewport tiers (--vp-*): volunteer_viewport_tokens.css (+ apply) load from volunteer_base.html after page CSS.
 */
:root {
  /* Brand palette */
  --primary:           #6b21a8;
  --primary-light:     rgba(107,33,168,0.10);
  --primary-lighter:   #9333ea;
  --primary-dark:      #4c1d76;
  --secondary:         #be185d;
  --secondary-light:   rgba(190,24,93,0.12);
  --secondary-dark:    #9f1239;
  --accent-pink:       #ec4899;
  --accent-purple:     #a855f7;
  --accent-rose:       #f43f5e;
  --light:             #ffffff;

  /* Gradients */
  --grad-hero:         linear-gradient(135deg, #6b21a8 0%, #be185d 100%);
  --grad-primary:      linear-gradient(135deg, #6b21a8 0%, #9333ea 100%);
  --grad-pill:         linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
  --grad-hover:        linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  --grad-warm:         linear-gradient(135deg, #be185d 0%, #ec4899 100%);
  --grad-card-top:     linear-gradient(135deg, #f8f4ff 0%, #fdf2f8 100%);
  --grad-tier-path:    linear-gradient(90deg, #cd7f32, #c0c0c0, #ffd700, #b9f2ff, #9333ea);
  --grad-mesh:         radial-gradient(ellipse at 20% 50%, rgba(107,33,168,0.08) 0%, transparent 60%),
                       radial-gradient(ellipse at 80% 20%, rgba(190,24,93,0.06) 0%, transparent 50%);

  /* Tier colours */
  --tier-bronze:       #cd7f32;
  --tier-silver:       #c0c0c0;
  --tier-gold:         #ffd700;
  --tier-diamond:      #b9f2ff;
  --tier-ultimate:     #9333ea;

  /* Neutral surfaces */
  --navy:              #1e1b4b;
  --bg-body:           #faf7ff;
  --bg-card:           #ffffff;
  --bg-soft:           #f8f4ff;
  --bg-pink-soft:      #fdf2f8;
  --border:            rgba(107,33,168,0.10);
  --border-solid:      #ede8f5;

  /* Text */
  --text-base:         #1e1b4b;
  --text-muted:        #6b7280;
  --text-subtle:       #9ca3af;

  /* Shadows — purple-tinted */
  --shadow-xs:         0 1px 4px rgba(107,33,168,0.06);
  --shadow-sm:         0 2px 10px rgba(107,33,168,0.07);
  --shadow-md:         0 8px 28px rgba(107,33,168,0.11);
  --shadow-lg:         0 20px 52px rgba(107,33,168,0.14);
  --shadow-xl:         0 32px 72px rgba(107,33,168,0.18);
  --shadow-pink:       0 8px 28px rgba(190,24,93,0.18);
  --glow-primary:      0 0 28px rgba(168,85,247,0.50);
  --glow-soft:         0 0 40px rgba(107,33,168,0.22);

  /* Glassmorphism */
  --glass-bg:          rgba(255,255,255,0.10);
  --glass-bg-light:    rgba(255,255,255,0.16);
  --glass-border:      rgba(255,255,255,0.22);
  --glass-blur:        blur(20px);

  /* Spacing */
  --space-xs:          0.375rem;
  --space-sm:          0.75rem;
  --space-md:          1.25rem;
  --space-lg:          2rem;
  --space-xl:          3.5rem;
  --space-2xl:         5rem;

  /* Radius */
  --r-xs:              6px;
  --r-sm:              10px;
  --r-md:              16px;
  --r-lg:              22px;
  --r-xl:              30px;
  --r-2xl:             40px;
  --r-full:            9999px;

  /* Typography */
  --font-display:      'Reddit Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:         'Reddit Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Transitions */
  --ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:       cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out:          cubic-bezier(0, 0, 0.2, 1);
  --t-fast:            0.16s var(--ease-standard);
  --t-base:            0.28s var(--ease-standard);
  --t-slow:            0.48s var(--ease-standard);

  /* Status (Applications tab — purple / orchid / rose, distinct but on-brand) */
  --status-approved-bg:     #f5f3ff;
  --status-approved-text:   #5b21b6;
  --status-approved-border: rgba(124, 58, 237, 0.35);
  --status-approved-dot:    #7c3aed;
  --status-pending-bg:      #faf5ff;
  --status-pending-text:    #6d28d9;
  --status-pending-border:  rgba(167, 139, 250, 0.55);
  --status-pending-dot:     #a855f7;
  --status-rejected-bg:     #fdf2f8;
  --status-rejected-text:   #9d174d;
  --status-rejected-border: rgba(244, 114, 182, 0.45);
  --status-rejected-dot:    #db2777;

  /* Pro-tip */
  --tip-bg:            linear-gradient(135deg, #fdf2f8, #f8f4ff);
  --tip-border:        rgba(190,24,93,0.25);
}

/* Base reset and typography (shared by all volunteer pages) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-base);
  background: var(--bg-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

img { max-width: 100%; height: auto; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font-body); }

/* Brand gradient CTA — certificates & primary volunteer actions */
a.vd-btn-grad,
.btn.vd-btn-grad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--grad-hero) !important;
  background-image: var(--grad-hero) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: var(--r-full);
  box-shadow: 0 4px 14px rgba(107, 33, 168, 0.28);
  transition: transform var(--t-fast), box-shadow var(--t-base), filter var(--t-fast);
}

a.vd-btn-grad:hover,
.btn.vd-btn-grad:hover {
  color: #fff !important;
  text-decoration: none !important;
  background: var(--grad-hover) !important;
  background-image: var(--grad-hover) !important;
  filter: brightness(1.02);
  box-shadow: 0 6px 20px rgba(107, 33, 168, 0.38);
  transform: translateY(-1px);
}

a.vd-btn-grad:focus-visible,
.btn.vd-btn-grad:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

a.vd-btn-grad:active,
.btn.vd-btn-grad:active {
  transform: translateY(0);
}