/**
 * SHEP.ID — DESIGN SYSTEM TOKENS
 * Premium glassmorphic styling system with configurable CSS variables.
 */

:root {
  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Outfit', var(--font-sans);
  --font-mono: 'JetBrains Mono', monospace;

  /* Border Radiuses */
  --radius-card: 28px;
  --radius-btn: 12px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;

  /* Glassmorphism & Card Colors (Overridable via config.theme) */
  --bg-primary: #0f0e17;
  --bg-card: rgba(22, 21, 32, 0.65);
  --bg-card-border: rgba(255, 255, 255, 0.12);
  --card-blur: 20px;

  /* Button Tokens */
  --btn-bg: rgba(255, 255, 255, 0.04);
  --btn-border: rgba(139, 92, 246, 0.25);
  --btn-hover-bg: rgba(139, 92, 246, 0.16);
  --btn-hover-border: rgba(168, 85, 247, 0.60);
  --btn-text: #ffffff;
  --btn-icon-color: #a5b4fc;

  /* Footer Circle Buttons */
  --circle-bg: rgba(255, 255, 255, 0.03);
  --circle-border: rgba(255, 255, 255, 0.14);
  --circle-hover-bg: rgba(255, 255, 255, 0.12);
  --circle-hover-border: rgba(168, 85, 247, 0.55);

  /* Typography Colors */
  --text-primary: #ffffff;
  --text-secondary: #9da3af;
  --text-muted: #64748b;
  --text-link: #8b8df8;
  --text-link-hover: #c4b5fd;

  /* Accent & Glow */
  --accent-color: #a855f7;
  --accent-gradient: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #38bdf8 100%);
  --avatar-glow-shadow: 0 0 24px rgba(168, 85, 247, 0.45);

  /* Shadows */
  --shadow-card: 0 30px 60px -15px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.1);
  --shadow-btn-hover: 0 6px 20px rgba(168, 85, 247, 0.28);
}