/*
 * SelfScore — global styles and animation tokens.
 * HTML structure stays in .erb; JS in separate files.
 */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ss-font-heading: 'Sora', system-ui, -apple-system, sans-serif;
  --ss-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --ss-green: #0d7d4a;
  --ss-green-hover: #1a9b5c;
  --ss-grass: #2dbb7a;
  --ss-electric: #00e5a0;
  --ss-warm: #f59e0b;
  --ss-pitch: #0a0f0c;
  --ss-pitch-soft: #141c17;
  --ss-white: #f8faf8;
  --ss-muted: #5c6b62;
  --ss-danger: #e5484d;
  --ss-border: rgba(255, 255, 255, 0.12);
  --ss-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --ss-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  --ss-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ss-transition-fast: 0.15s ease;
  --ss-space-xs: 0.25rem;
  --ss-space-sm: 0.5rem;
  --ss-space-md: 1rem;
  --ss-space-lg: 1.5rem;
  --ss-space-xl: 2rem;
  --ss-space-xxl: 3rem;
  --ss-radius-sm: 0.35rem;
  --ss-radius-md: 0.5rem;
  --ss-radius-lg: 0.75rem;
  --ss-radius-xl: 1rem;
  --ss-background: #f0f2f5;
  --ss-background-soft: #e4e8eb;
  --ss-card: #ffffff;
  --ss-card-hover: #f8faf8;
  --ss-text: #0a0f0c;
  --ss-text-secondary: #5c6b62;
  --ss-input-bg: #ffffff;
  --ss-input-border: rgba(0, 0, 0, 0.1);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --ss-pitch: #0a0f0c;
  --ss-pitch-soft: #141c17;
  --ss-white: #f8faf8;
  --ss-muted: #9ca8a2;
  --ss-border: rgba(248, 250, 248, 0.16);
  --ss-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  --ss-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.8);
  --ss-background: #0a0f0c;
  --ss-background-soft: #141c17;
  --ss-card: #1a231e;
  --ss-card-hover: #212b25;
  --ss-text: #f8faf8;
  --ss-text-secondary: #9ca8a2;
  --ss-input-bg: #1a231e;
  --ss-input-border: rgba(248, 250, 248, 0.15);
}

@keyframes ss-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ss-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ss-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ss-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ss-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes ss-shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ss-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Utility classes for views that want animations */
.ss-animate-in {
  animation: ss-fade-in-up 0.5s ease-out both;
}

.ss-animate-in--delay-1 { animation-delay: 0.1s; }
.ss-animate-in--delay-2 { animation-delay: 0.2s; }
.ss-animate-in--delay-3 { animation-delay: 0.3s; }
.ss-animate-in--delay-4 { animation-delay: 0.4s; }