/**
 * Psyn.app - Main Stylesheet
 * Design System: Code as Craft
 * Designer: Zara
 */

/* ============================================
   CSS RESET & BASE
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--frost-secondary);
  background-color: var(--midnight-canvas);
  line-height: 1.6;
  min-height: 100vh;
}

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

:root {
  /* Colors - Primary Palette */
  --midnight-canvas: #0a0e14;
  --midnight-card: #131820;
  --midnight-elevated: #1a1f29;
  --midnight-popover: #212733;
  
  --frost-white: #e6e8eb;
  --frost-secondary: #cdd0d6;
  --frost-tertiary: #959aa3;
  --frost-disabled: #5c6370;
  
  --syntax-gold: #3178C6;
  --function-blue: #86c0ff;
  --variable-teal: #5fb3b3;
  --comment-gray: #65737e;
  --error-coral: #ec5f67;
  
  /* Typography */
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-code: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', Consolas, monospace;
  
  /* Type Scale (Major Third - 1.25 ratio) */
  --text-xs: 0.64rem;      /* 10.24px */
  --text-sm: 0.8rem;       /* 12.8px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.25rem;      /* 20px */
  --text-xl: 1.563rem;     /* 25px */
  --text-2xl: 1.953rem;    /* 31.25px */
  --text-3xl: 2.441rem;    /* 39px */
  --text-4xl: 3.052rem;    /* 48.83px */
  --text-5xl: 3.815rem;    /* 61px */
  --text-6xl: 4.768rem;    /* 76px */
  
  /* Spacing (8px base grid) */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 2.5rem;   /* 40px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-10: 5rem;    /* 80px */
  --space-12: 6rem;    /* 96px */
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Transitions */
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-glacial: 1000ms;
  
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Shadows */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-high: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-dramatic: 0 16px 64px rgba(0, 0, 0, 0.6);
  
  /* Responsive breakpoints (for reference, use in media queries) */
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-2xl: 1536px;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--frost-white);
  line-height: 1.2;
  font-weight: 700;
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.015em;
  font-weight: 600;
}

h3 {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  font-weight: 600;
}

h4 {
  font-size: var(--text-xl);
}

p {
  margin-bottom: var(--space-3);
  max-width: 65ch;
}

a {
  color: var(--function-blue);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--syntax-gold);
}

a:focus {
  outline: 2px solid var(--syntax-gold);
  outline-offset: 4px;
}

code {
  font-family: var(--font-code);
  font-size: 0.9em;
  background: rgba(134, 192, 255, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  color: var(--function-blue);
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container--narrow {
  max-width: 800px;
}

.container--wide {
  max-width: 1536px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center {
  text-align: center;
}

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* ============================================
   ANIMATIONS & KEYFRAMES
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes syntaxSweep {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s var(--ease-out);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--frost-tertiary);
  font-family: var(--font-code);
  font-size: var(--text-lg);
}

.loading::after {
  content: '▊';
  animation: blink 1s step-end infinite;
  margin-left: 0.25em;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  animation: fadeInUp 0.6s var(--ease-out);
}

.empty-state__icon {
  font-size: 2.5rem;
  color: var(--function-blue);
  opacity: 0.6;
  margin-bottom: var(--space-3);
  font-family: var(--font-code);
}

.empty-state__comment {
  font-family: var(--font-code);
  font-size: var(--text-base);
  color: var(--function-blue);
  opacity: 0.7;
  margin-bottom: var(--space-2);
}

.empty-state__message {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--frost-secondary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.empty-state__description {
  font-size: var(--text-base);
  color: var(--frost-tertiary);
  max-width: 50ch;
  margin: 0 auto var(--space-4);
  line-height: 1.6;
}

.empty-state__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--function-blue);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.empty-state__link:hover {
  color: #a0d4ff;
  gap: var(--space-2);
}

/* Fade-in animation for empty state */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile responsive empty state */
@media (max-width: 768px) {
  .empty-state {
    padding: var(--space-8) var(--space-4);
  }
  
  .empty-state__icon {
    font-size: 2rem;
  }
  
  .empty-state__message {
    font-size: var(--text-xl);
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--syntax-gold);
  outline-offset: 4px;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

@media (max-width: 768px) {
  :root {
    --text-6xl: 2.5rem;
    --text-5xl: 2.2rem;
    --text-4xl: 2rem;
    --text-3xl: 1.75rem;
  }
  
  h1 {
    font-size: var(--text-3xl);
  }
  
  h2 {
    font-size: var(--text-2xl);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  body {
    background: white;
    color: black;
  }
  
  a {
    text-decoration: underline;
  }
  
  .no-print {
    display: none;
  }
}