/**
 * PsyConnect Restorative Dopamine Design System
 * 60-30-10 Color Architecture • Organic Spring Deceleration • Tactile Haptic Physics
 * DPDP Act 2023 Compliant • WCAG 2.1 AAA Contrast
 */

:root {
  /* 60% Canvas & Surfaces */
  --psy-canvas: #fdfbf9;
  --psy-surface-card: #ffffff;
  --psy-surface-subtle: #f8fafc;
  --psy-surface-border: #e2e8f0;
  --psy-surface-border-subtle: rgba(244, 63, 94, 0.12);

  /* 30% Obsidian Ink & Typography */
  --psy-text-title: #0f172a;
  --psy-text-body: #334155;
  --psy-text-muted: #64748b;
  --psy-text-on-dark: #ffffff;

  /* 10% Restorative Habit Accents */
  /* Primary Vitality: Sunset Rose Pulse */
  --psy-rose-50: #fff1f2;
  --psy-rose-100: #ffe4e6;
  --psy-rose-200: #fecdd3;
  --psy-rose-500: #f43f5e;
  --psy-rose-600: #e11d48;
  --psy-rose-700: #be123c;
  --psy-rose-900: #881337;

  /* Growth & Exhale: Eucalyptus Sage */
  --psy-sage-50: #ecfdf5;
  --psy-sage-100: #d1fae5;
  --psy-sage-200: #a7f3d0;
  --psy-sage-600: #059669;
  --psy-sage-700: #047857;

  /* Cognitive Clarity: Cerulean Indigo */
  --psy-indigo-50: #eff6ff;
  --psy-indigo-100: #dbeafe;
  --psy-indigo-200: #bfdbfe;
  --psy-indigo-600: #2563eb;
  --psy-indigo-700: #1d4ed8;

  /* Warm Sunlight: Golden Saffron */
  --psy-amber-50: #fffbeb;
  --psy-amber-100: #fef3c7;
  --psy-amber-500: #f59e0b;
  --psy-amber-700: #b45309;

  /* Organic Motion Physics: Apple/Linear Deceleration Curve */
  --psy-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --psy-transition-fast: 0.18s var(--psy-ease-spring);
  --psy-transition-smooth: 0.3s var(--psy-ease-spring);
  --psy-transition-slow: 0.5s var(--psy-ease-spring);
}

/* Global Smooth Behavior & Canvas Base */
html {
  scroll-behavior: smooth;
  background-color: var(--psy-canvas) !important;
}

body {
  background-color: var(--psy-canvas) !important;
  color: var(--psy-text-title);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tactile Haptic Micro-Scale on Click */
button,
.btn,
.option-btn,
.interactive-card,
.lib-card,
.timeline-card,
.grounding-card,
[role="button"] {
  transition: transform 0.2s var(--psy-ease-spring), box-shadow 0.2s var(--psy-ease-spring), background-color 0.2s ease, border-color 0.2s ease !important;
}

button:active,
.btn:active,
.option-btn:active,
.interactive-card:active,
[role="button"]:active {
  transform: scale(0.975) !important;
}

/* 60 BPM Organic Vagus Nerve Breathing Glow */
@keyframes psyVagusPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.35);
  }
  50% {
    box-shadow: 0 0 24px 8px rgba(244, 63, 94, 0.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.35);
  }
}

.psy-breathing-aura {
  animation: psyVagusPulse 4s infinite ease-in-out;
}

/* Organic Soft Shadows */
.psy-shadow-sm {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.psy-shadow-md {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(244, 63, 94, 0.03);
}
.psy-shadow-lg {
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07), 0 4px 12px rgba(244, 63, 94, 0.05);
}

/* Clean Typography Defaults */
h1, h2, h3, h4 {
  color: var(--psy-text-title);
  letter-spacing: -0.025em;
  font-weight: 800;
}

p {
  color: var(--psy-text-body);
  line-height: 1.7;
}

/* Accessibility Focus States */
button:focus-visible,
a:focus-visible {
  outline: 2.5px solid var(--psy-rose-500) !important;
  outline-offset: 3px !important;
}