/* ============================================================================
   RunCoach Design System — "Refined Athletic"
   Bricolage Grotesque (display) + DM Sans (body) + JetBrains Mono (data)
   Cobalt blue primary, warm coral accent, warm off-white light theme
   ========================================================================= */

:root {
  /* ---- Color Tokens ---- */
  --color-primary: #1D4ED8;
  --color-primary-light: #3B6EEA;
  --color-primary-dark: #1639B0;
  --color-primary-subtle: rgba(29, 78, 216, 0.08);
  --color-primary-ghost: rgba(29, 78, 216, 0.04);

  --color-accent: #FF6246;
  --color-accent-light: #FF8A74;
  --color-accent-dark: #E04A30;
  --color-accent-subtle: rgba(255, 98, 70, 0.08);

  --color-secondary: #0D9488;
  --color-secondary-light: #2DD4BF;
  --color-secondary-dark: #0F766E;

  /* Neutrals — warm undertone (light mode) */
  --color-bg: #FAFAF7;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken: #F3F2EE;
  --color-bg-overlay: rgba(18, 16, 28, 0.55);
  --color-surface: #EEEDEA;
  --color-border: #E2E0DB;
  --color-border-subtle: #EEEDE9;

  /* Text */
  --color-text: #1C1917;
  --color-text-secondary: #6B6560;
  --color-text-muted: #A09A93;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-accent: #FFFFFF;

  /* Semantic */
  --color-error: #DC2626;
  --color-error-subtle: #FEF2F2;
  --color-error-border: #FECACA;
  --color-success: #16A34A;
  --color-success-subtle: #F0FDF4;
  --color-success-border: #BBF7D0;
  --color-warning: #D97706;
  --color-warning-subtle: #FFFBEB;
  --color-warning-border: #FDE68A;
  --color-info: #0284C7;
  --color-info-subtle: #F0F9FF;
  --color-info-border: #BAE6FD;

  /* ---- Typography ---- */
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 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.5rem;     /* 40px */
  --text-5xl: 3.25rem;    /* 52px */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* Aliases for backward compatibility */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 8px -1px rgba(28, 25, 23, 0.06), 0 2px 4px -2px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(28, 25, 23, 0.08), 0 4px 8px -4px rgba(28, 25, 23, 0.04);
  --shadow-xl: 0 20px 40px -8px rgba(28, 25, 23, 0.1), 0 8px 16px -8px rgba(28, 25, 23, 0.06);
  --shadow-glow: 0 0 0 1px var(--color-primary-subtle), 0 4px 16px rgba(29, 78, 216, 0.12);
  --shadow-accent-glow: 0 0 0 1px var(--color-accent-subtle), 0 4px 16px rgba(255, 98, 70, 0.12);

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;

  /* Aliases for backward compat */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* Backward compat */
  --z-fixed: var(--z-sticky);

  /* ---- Misc ---- */
  --container-max: 1120px;
  --container-narrow: 640px;

  /* Backward compat color aliases */
  --color-background: var(--color-bg);
  --color-background-alt: var(--color-bg-sunken);
  --color-text-on-primary: #FFFFFF;
  --font-primary: var(--font-body);
  --font-heading: var(--font-display);
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --font-size-3xl: var(--text-3xl);
  --font-size-4xl: var(--text-4xl);
  --font-weight-normal: var(--weight-normal);
  --font-weight-medium: var(--weight-medium);
  --font-weight-semibold: var(--weight-semibold);
  --font-weight-bold: var(--weight-bold);
  --line-height-tight: var(--leading-tight);
  --line-height-normal: var(--leading-normal);
  --line-height-relaxed: var(--leading-relaxed);
  --color-surface: var(--color-surface);
  --color-border-light: var(--color-border-subtle);
  --color-error-light: var(--color-error-subtle);
  --color-success-light: var(--color-success-subtle);
  --color-warning-light: var(--color-warning-subtle);
  --color-info-light: var(--color-info-subtle);
}

/* ============================================================================
   Reset
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Subtle noise texture for depth */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  touch-action: manipulation;
}

button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================================================
   Typography
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
  letter-spacing: 0.03em;
  margin-block-end: var(--space-4);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: 900;
  letter-spacing: 0.01em;
  margin-block-end: var(--space-6);
}

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

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

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

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

p {
  margin-block-end: var(--space-4);
  line-height: var(--leading-relaxed);
}

p:last-child {
  margin-block-end: 0;
}

a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

strong, b {
  font-weight: var(--weight-bold);
}

small {
  font-size: var(--text-sm);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

code {
  padding: 2px 6px;
  background-color: var(--color-surface);
  border-radius: var(--radius-xs);
}

pre {
  padding: var(--space-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-block-end: var(--space-4);
}

pre code {
  padding: 0;
  background: none;
}

/* Overline / label style */
.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================================
   Layout
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-narrow {
  max-width: var(--container-narrow);
}

/* ============================================================================
   Utility Classes
   ========================================================================= */

/* Spacing */
.mt-xs { margin-block-start: var(--space-1); }
.mt-sm { margin-block-start: var(--space-2); }
.mt-md { margin-block-start: var(--space-4); }
.mt-lg { margin-block-start: var(--space-6); }
.mt-xl { margin-block-start: var(--space-8); }

.mb-xs { margin-block-end: var(--space-1); }
.mb-sm { margin-block-end: var(--space-2); }
.mb-md { margin-block-end: var(--space-4); }
.mb-lg { margin-block-end: var(--space-6); }
.mb-xl { margin-block-end: var(--space-8); }

.ml-xs { margin-inline-start: var(--space-1); }
.ml-sm { margin-inline-start: var(--space-2); }
.ml-md { margin-inline-start: var(--space-4); }
.ml-lg { margin-inline-start: var(--space-6); }
.ml-xl { margin-inline-start: var(--space-8); }

.mr-xs { margin-inline-end: var(--space-1); }
.mr-sm { margin-inline-end: var(--space-2); }
.mr-md { margin-inline-end: var(--space-4); }
.mr-lg { margin-inline-end: var(--space-6); }
.mr-xl { margin-inline-end: var(--space-8); }

.p-xs { padding: var(--space-1); }
.p-sm { padding: var(--space-2); }
.p-md { padding: var(--space-4); }
.p-lg { padding: var(--space-6); }
.p-xl { padding: var(--space-8); }

.px-xs { padding-inline: var(--space-1); }
.px-sm { padding-inline: var(--space-2); }
.px-md { padding-inline: var(--space-4); }
.px-lg { padding-inline: var(--space-6); }
.px-xl { padding-inline: var(--space-8); }

.py-xs { padding-block: var(--space-1); }
.py-sm { padding-block: var(--space-2); }
.py-md { padding-block: var(--space-4); }
.py-lg { padding-block: var(--space-6); }
.py-xl { padding-block: var(--space-8); }

/* Text */
.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-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-accent { color: var(--color-accent); }

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

.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-display { font-family: var(--font-display); }

/* Flex / Grid */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.gap-xs { gap: var(--space-1); }
.gap-sm { gap: var(--space-2); }
.gap-md { gap: var(--space-4); }
.gap-lg { gap: var(--space-6); }
.gap-xl { gap: var(--space-8); }

/* Borders & Shadows */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.border { border: 1px solid var(--color-border); }
.border-light { border: 1px solid var(--color-border-subtle); }

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Footer
   ========================================================================= */

.site-footer {
  margin-top: var(--space-16);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

/* ============================================================================
   Animations
   ========================================================================= */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

/* Stagger animation utility */
.stagger > * {
  animation: slideUp var(--duration-slow) var(--ease-out) both;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(7) { animation-delay: 360ms; }
.stagger > *:nth-child(8) { animation-delay: 420ms; }

/* ============================================================================
   Responsive Utilities
   ========================================================================= */

@media (min-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
}

/* ============================================================================
   Mobile Optimizations
   ========================================================================= */

@media (max-width: 768px) {
  :root {
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;
  }

  .container {
    padding-inline: var(--space-4);
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }

  button,
  input[type="button"],
  input[type="submit"],
  .btn {
    min-height: 48px;
    min-width: 48px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
  }

  .container {
    padding-inline: var(--space-4);
  }
}

/* ============================================================================
   Dark Mode — applied via [data-theme="dark"] on <html> element
   ========================================================================= */

[data-theme="dark"] {
  --color-primary: #4F83F0;
  --color-primary-light: #6B99F5;
  --color-primary-dark: #3366D0;
  --color-primary-subtle: rgba(79, 131, 240, 0.12);
  --color-primary-ghost: rgba(79, 131, 240, 0.06);

  --color-accent: #FF7A62;
  --color-accent-light: #FF9A86;
  --color-accent-dark: #E05A42;
  --color-accent-subtle: rgba(255, 122, 98, 0.12);

  --color-bg: #0F0E13;
  --color-bg-elevated: #1A1920;
  --color-bg-sunken: #0A090E;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);
  --color-surface: #242330;
  --color-border: #2E2D3A;
  --color-border-subtle: #1F1E28;

  --color-text: #F0EDE8;
  --color-text-secondary: #9B978F;
  --color-text-muted: #6B6862;
  --color-text-on-primary: #FFFFFF;

  --color-error: #FF6B6B;
  --color-error-subtle: rgba(255, 107, 107, 0.12);
  --color-error-border: rgba(255, 107, 107, 0.25);
  --color-success: #34D46A;
  --color-success-subtle: rgba(52, 212, 106, 0.12);
  --color-success-border: rgba(52, 212, 106, 0.25);
  --color-warning: #FFBA2E;
  --color-warning-subtle: rgba(255, 186, 46, 0.12);
  --color-warning-border: rgba(255, 186, 46, 0.25);
  --color-info: #4BA8FF;
  --color-info-subtle: rgba(75, 168, 255, 0.12);
  --color-info-border: rgba(75, 168, 255, 0.25);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px var(--color-primary-subtle), 0 4px 16px rgba(79, 131, 240, 0.2);
  --shadow-accent-glow: 0 0 0 1px var(--color-accent-subtle), 0 4px 16px rgba(255, 122, 98, 0.2);
}