/* app/assets/stylesheets/application.css */

/* ===============================================
   FONT IMPORTS - Oswald Primary Font
   =============================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');

/* ===============================================
   loading-screen IMPORT
   =============================================== */

@import "animations/loading-screen.css";

/* Disable Turbo's loading indicators */
.turbo-progress-bar {
  display: none !important;
}

/* Disable Turbo's default loading states */
[data-turbo-temporary] {
  display: none !important;
}

/* ===============================================
   CSS CUSTOM PROPERTIES - DARK THEME FOUNDATION
   =============================================== */

:root {
  /* === TYPOGRAPHY SYSTEM - OSWALD PRIMARY === */
  --font-primary: 'Oswald', 'Arial Black', sans-serif;
  --font-display: 'Oswald', 'Arial Black', sans-serif;
  --font-accent: 'Oswald', 'Arial Black', sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* === FONT WEIGHTS - OSWALD OPTIMIZED === */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* === FONT SIZES - RESPONSIVE SCALE === */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */

  /* === LINE HEIGHTS === */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* === LETTER SPACING === */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* === DARK THEME COLORS === */
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --bg-overlay: #30363d;

  --surface-primary: #161b22;
  --surface-hover: #21262d;
  --surface-active: #30363d;

  --text-primary: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --text-inverse: #0d1117;

  --accent-primary: #58a6ff;
  --accent-success: #3fb950;
  --accent-warning: #f85149;
  --accent-info: #79c0ff;
  --accent-recovery: #a5a5a5;

  --border-default: #30363d;
  --border-muted: #21262d;
  --border-emphasis: #f0f6fc;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

  /* === SPACING SCALE === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* === BORDER RADIUS === */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* === TRANSITIONS === */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;
  --transition-slow: 0.35s ease-in-out;
}

/* ===============================================
   GLOBAL RESET & BASE STYLES
   =============================================== */

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-weight: var(--weight-normal);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* ===============================================
   TYPOGRAPHY HIERARCHY - OSWALD THROUGHOUT
   =============================================== */

/* === HEADINGS === */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--accent-success);
}

h3, .h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--accent-info);
}

h4, .h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}

h5, .h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

h6, .h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* === BODY TEXT === */
p {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-primary);
  font-weight: var(--weight-normal);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

/* === SPECIALIZED TYPOGRAPHY CLASSES === */

/* Brand/Logo */
.brand-text, .navbar-brand {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-2xl) !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--tracking-wide) !important;
}

/* Navigation */
.nav-text, .nav-link {
  font-family: var(--font-primary) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--text-secondary) !important;
  letter-spacing: var(--tracking-wide) !important;
}

/* Data/Numbers - Monospace for precise alignment */
.data-text, .metric-value, .countdown-number {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--accent-primary);
  letter-spacing: var(--tracking-normal);
}

.countdown-unit {
  font-family: var(--font-primary);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
}

/* Exercise/Workout specific typography */
.exercise-name, .workout-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-wide);
}

.set-number {
  font-family: var(--font-accent);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
  letter-spacing: var(--tracking-normal);
}

/* Form labels */
.form-label, label {
  font-family: var(--font-primary) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--text-primary) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase;
  font-size: var(--text-sm) !important;
}

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

/* Typewriter Animation */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--accent-primary); }
}

.typewriter-text {
  overflow: hidden;
  border-right: 0.15em solid var(--accent-primary);
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: var(--tracking-wide);
  animation:
    typewriter 3.5s steps(40, end),
    blink-caret 0.75s step-end infinite;
}

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-delay-1 { animation-delay: 0.2s; }
.fade-in-delay-2 { animation-delay: 0.4s; }
.fade-in-delay-3 { animation-delay: 0.6s; }

/* Slide Up Animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

.slide-up-delay-1 { animation-delay: 0.1s; }
.slide-up-delay-2 { animation-delay: 0.2s; }
.slide-up-delay-3 { animation-delay: 0.3s; }

/* Character Animate */
.char-animate {
  display: inline-block;
  opacity: 0;
  animation: charFadeIn 0.5s ease-out forwards;
}

@keyframes charFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px) rotateX(90deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

/* Highlight Animation */
.highlight-text {
  position: relative;
  color: var(--text-primary);
}

.highlight-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-primary);
  transition: width 0.6s ease-out;
}

.highlight-text.animate::after {
  width: 100%;
}

/* ===============================================
   LINKS & INTERACTIVE ELEMENTS
   =============================================== */

a {
  color: var(--accent-primary);
  text-decoration: none;
  font-family: var(--font-primary);
  font-weight: var(--weight-normal);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-info);
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

/* Font Weight Utilities */
.font-light { font-weight: var(--weight-light); }
.font-normal { font-weight: var(--weight-normal); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }

/* Font Size Utilities */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

/* Color Utilities */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--accent-primary) !important; }
.text-success { color: var(--accent-success) !important; }
.text-warning { color: var(--accent-warning) !important; }

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

@media (max-width: 768px) {
  :root {
    --text-4xl: 2rem;      /* Smaller on mobile */
    --text-3xl: 1.75rem;
    --text-2xl: 1.5rem;
    --text-xl: 1.25rem;
  }

  h1, .h1 { font-size: var(--text-4xl); }
  h2, .h2 { font-size: var(--text-3xl); }
  h3, .h3 { font-size: var(--text-2xl); }

  body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
  }

  .brand-text, .navbar-brand {
    font-size: var(--text-xl) !important;
  }
}

@media (max-width: 480px) {
  :root {
    --text-4xl: 1.75rem;   /* Even smaller on very small screens */
    --text-3xl: 1.5rem;
    --text-2xl: 1.25rem;
  }
}

/* ===============================================
   ACCESSIBILITY & REDUCED MOTION
   =============================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --border-default: #ffffff;
    --accent-primary: #66b3ff;
  }
}

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

@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  h1, h2, h3, h4, h5, h6 {
    color: black !important;
    page-break-after: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }
}