@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* Prahar Community Design Tokens — Single Source of Truth
   Neomorphism UI/UX + Framer Motion Physics + Cyber Brand Elevation */
:root {
  /* Dark Theme (Default - Deep Obsidian / Cyber Neomorphism) */
  --bg: #070a12;
  --bg-gradient: radial-gradient(circle at 50% 0%, #0d1629 0%, #070a12 70%);
  --surface: #0c1222;
  --surface-hover: #111a30;
  --surface-2: #141f38;
  --surface-elevated: #182542;
  --surface-alt: rgba(14, 20, 36, 0.45);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-hover: rgba(0, 229, 153, 0.45);
  --border-glow: rgba(0, 242, 254, 0.3);
  
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  
  --accent: #00e599;
  --accent-secondary: #00f2fe;
  --accent-hover: #05f0a2;
  --accent-contrast: #070a12;
  --accent-soft: rgba(0, 229, 153, 0.12);
  --cyan-soft: rgba(0, 242, 254, 0.12);
  --purple-soft: rgba(138, 43, 226, 0.14);
  
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.14);
  --success: #10b981;
  --warning: #f59e0b;
  
  /* Neomorphism Depth Tokens (Dark Neu - Tactile Cyber Obsidian) */
  --neu-flat: 8px 8px 24px rgba(0, 0, 0, 0.75), -6px -6px 20px rgba(255, 255, 255, 0.035), inset 1px 1px 1px rgba(255, 255, 255, 0.1);
  --neu-convex: 10px 10px 30px rgba(0, 0, 0, 0.8), -8px -8px 25px rgba(255, 255, 255, 0.045), inset 1px 1px 2px rgba(255, 255, 255, 0.18), inset -1px -1px 2px rgba(0, 0, 0, 0.6);
  --neu-concave: inset 5px 5px 14px rgba(0, 0, 0, 0.85), inset -4px -4px 10px rgba(255, 255, 255, 0.035);
  --neu-inset: inset 4px 4px 10px rgba(0, 0, 0, 0.85), inset -2px -2px 6px rgba(255, 255, 255, 0.035);
  --neu-card: 14px 14px 34px rgba(0, 0, 0, 0.85), -8px -8px 24px rgba(255, 255, 255, 0.035), inset 1px 1px 1.5px rgba(255, 255, 255, 0.12);
  --neu-card-hover: 18px 18px 42px rgba(0, 0, 0, 0.9), -10px -10px 28px rgba(255, 255, 255, 0.05), inset 1px 1px 2px rgba(255, 255, 255, 0.18);
  --neu-btn: 5px 5px 16px rgba(0, 0, 0, 0.65), -4px -4px 14px rgba(255, 255, 255, 0.035), inset 0 1px 1px rgba(255, 255, 255, 0.22);
  --neu-btn-hover: 8px 8px 24px rgba(0, 0, 0, 0.75), -6px -6px 18px rgba(255, 255, 255, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.32);
  --neu-btn-pressed: inset 4px 4px 9px rgba(0, 0, 0, 0.9), inset -2px -2px 6px rgba(255, 255, 255, 0.04);
  --neu-pill: 4px 4px 12px rgba(0, 0, 0, 0.6), -3px -3px 10px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --neu-glow: 0 0 28px rgba(0, 229, 153, 0.4), inset 0 0 15px rgba(0, 229, 153, 0.15);
  --neu-glow-cyan: 0 0 28px rgba(0, 242, 254, 0.4), inset 0 0 15px rgba(0, 242, 254, 0.15);
  
  /* Radii Scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 30px;
  --radius-full: 9999px;

  /* Shadows & Glows */
  --shadow-subtle: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
  --glow-accent: 0 0 35px -5px rgba(0, 229, 153, 0.35);
  --glow-cyan: 0 0 35px -5px rgba(0, 242, 254, 0.35);

  /* Layout Dimensions */
  --container-width: 1240px;

  /* Typography (Curated from uiux reference: Plus Jakarta Sans + Inter + Space Mono) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-headline: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* Motion Curves (Framer Motion feel) */
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 550ms;
  --ease-framer: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Light Theme (Soft Titanium / Neomorphic Chalk Canvas) */
html.light,
[data-theme='light'] {
  --bg: #edf2f7;
  --bg-gradient: radial-gradient(circle at 50% 0%, #ffffff 0%, #edf2f7 85%);
  --surface: #f1f5f9;
  --surface-hover: #f8fafc;
  --surface-2: #e2e8f0;
  --surface-elevated: #ffffff;
  --surface-alt: #e8eef5;
  --border: rgba(255, 255, 255, 0.75);
  --border-strong: rgba(148, 163, 184, 0.28);
  --border-hover: rgba(4, 120, 87, 0.55);
  --border-glow: rgba(4, 120, 87, 0.3);
  
  --text: #090d16;
  --text-muted: #334155;
  --text-dim: #64748b;
  
  --accent: #047857;
  --accent-secondary: #0284c7;
  --accent-hover: #065f46;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(4, 120, 87, 0.12);
  --cyan-soft: rgba(2, 132, 199, 0.12);
  --purple-soft: rgba(138, 43, 226, 0.12);
  
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.12);
  --success: #059669;
  --warning: #d97706;

  /* Neomorphism Depth Tokens (Light Neu - Tactile Molded Surfaces) */
  --neu-flat: 8px 8px 20px rgba(166, 180, 200, 0.45), -8px -8px 20px rgba(255, 255, 255, 0.95), inset 1px 1px 1px rgba(255, 255, 255, 0.85);
  --neu-convex: 10px 10px 24px rgba(166, 180, 200, 0.5), -10px -10px 24px rgba(255, 255, 255, 0.95), inset 1px 1px 2px rgba(255, 255, 255, 0.95), inset -1px -1px 2px rgba(166, 180, 200, 0.25);
  --neu-concave: inset 4px 4px 9px rgba(166, 180, 200, 0.45), inset -4px -4px 9px rgba(255, 255, 255, 0.9);
  --neu-inset: inset 3px 3px 7px rgba(166, 180, 200, 0.45), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
  --neu-card: 12px 12px 28px rgba(166, 180, 200, 0.42), -10px -10px 26px rgba(255, 255, 255, 0.95), inset 1px 1px 2px rgba(255, 255, 255, 0.85);
  --neu-card-hover: 16px 16px 36px rgba(166, 180, 200, 0.55), -14px -14px 34px rgba(255, 255, 255, 1), inset 1px 1px 2px rgba(255, 255, 255, 0.95);
  --neu-btn: 5px 5px 14px rgba(166, 180, 200, 0.45), -5px -5px 14px rgba(255, 255, 255, 0.95), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  --neu-btn-hover: 8px 8px 20px rgba(166, 180, 200, 0.55), -8px -8px 20px rgba(255, 255, 255, 1), inset 0 1px 2px rgba(255, 255, 255, 0.95);
  --neu-btn-pressed: inset 3px 3px 6px rgba(166, 180, 200, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.95);
  --neu-pill: 4px 4px 10px rgba(166, 180, 200, 0.4), -4px -4px 10px rgba(255, 255, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --neu-glow: 0 0 24px rgba(4, 120, 87, 0.28), inset 0 0 12px rgba(4, 120, 87, 0.12);
  --neu-glow-cyan: 0 0 24px rgba(2, 132, 199, 0.28), inset 0 0 12px rgba(2, 132, 199, 0.12);

  --shadow-subtle: 0 4px 18px -2px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 8px 26px rgba(15, 23, 42, 0.06);
  --shadow-elevated: 0 18px 36px -12px rgba(15, 23, 42, 0.08);
  --glow-accent: 0 0 25px -5px rgba(0, 168, 110, 0.2);
  --glow-cyan: 0 0 25px -5px rgba(2, 132, 199, 0.2);
}