/* ===================================
   GLOBAL STYLES - Shared Across All Pages
   =================================== */

/* ===================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   =================================== */
:root {
  /* Colors - Dark Mode (Default) */
  --color-bg: #131313;
  --color-bg-elevated: #1c1c1c;
  --color-bg-hover: #232323;
  --color-text: #c8c8c8;
  --color-text-muted: #999999;
  --color-text-active: #ffffff;
  --color-accent: #ffffff;

  /* Spacing Scale (8px base unit) */
  --space-2: 4px;
  --space-4: 8px;
  --space-6: 12px;
  --space-8: 16px;
  --space-12: 24px;
  --space-16: 32px;
  --space-24: 48px;
  --space-32: 64px;
  --space-48: 96px;
  --space-64: 128px;

  /* Legacy spacing aliases (for existing references) */
  --space-xs: var(--space-4);
  --space-sm: var(--space-8);
  --space-md: var(--space-16);
  --space-lg: var(--space-32);
  --space-xl: var(--space-64);

  /* Animation Timings */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Standardized Easing Curves (3 named options) */
  --ease-default: ease;
  --ease-spring: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-material: cubic-bezier(0.4, 0, 0.2, 1);

  /* Fluid transition using spring ease */
  --transition-fluid: 0.6s var(--ease-spring);

  /* Glass Effect */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-focus: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(20px);

  /* Shadows */
  --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(255, 255, 255, 0.1);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 25px;
  --radius-full: 50%;

  /* Typography - Font Family
     Futura is the primary typeface (system font on macOS/iOS).
     On Windows/Android/Linux, the OS sans-serif fallback applies.
     Jost is bundled ONLY for the password field alt-font glyph. */
  --font-family: Futura, sans-serif;

  /* Type Scale - Desktop */
  --font-size-display: 48px;
  --font-size-headline: 36px;
  --font-size-title1: 28px;
  --font-size-title2: 24px;
  --font-size-body: 18px;
  --font-size-callout: 16px;
  --font-size-subheadline: 14px;
  --font-size-footnote: 13px;
  --font-size-caption: 12px;

  /* Legacy size aliases (for existing references) */
  --font-size-sm: var(--font-size-subheadline);
  --font-size-md: var(--font-size-body);
  --font-size-lg: var(--font-size-title2);
  --font-size-xl: var(--font-size-headline);

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Letter Spacing Scale */
  --tracking-tight: 0.05em;
  --tracking-normal: 0.08em;
  --tracking-wide: 0.1em;
  --tracking-wider: 0.15em;
  --tracking-widest: 0.2em;
}

/* Light Mode Color Overrides */
body.light-mode {
  --color-bg: #f5f5f5;
  --color-bg-elevated: #e8e8e8;
  --color-bg-hover: #f0f0f0;
  --color-text: #2a2a2a;
  --color-text-muted: #757575;
  --color-text-active: #000000;
  --color-accent: #000000;

  --glass-bg: rgba(0, 0, 0, 0.05);
  --glass-bg-hover: rgba(0, 0, 0, 0.08);
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-border-focus: rgba(0, 0, 0, 0.25);

  --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 40px rgba(0, 0, 0, 0.05);
}

/* Tablet Type Scale */
@media (max-width: 1024px) {
  :root {
    --font-size-display: 40px;
    --font-size-headline: 32px;
    --font-size-title1: 24px;
    --font-size-title2: 22px;
    --font-size-body: 16px;
    --font-size-callout: 16px;
    --font-size-subheadline: 14px;
    --font-size-footnote: 13px;
    --font-size-caption: 12px;
  }
}

/* Mobile Type Scale */
@media (max-width: 768px) {
  :root {
    --font-size-display: 36px;
    --font-size-headline: 28px;
    --font-size-title1: 22px;
    --font-size-title2: 20px;
    --font-size-body: 16px;
    --font-size-callout: 15px;
    --font-size-subheadline: 13px;
    --font-size-footnote: 12px;
    --font-size-caption: 11px;
  }
}

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

/* Fluid hover lift effect */
.lift-on-hover {
  transition: transform var(--transition-fluid),
              box-shadow var(--transition-fluid);
}

.lift-on-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Glass panel effect */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.glass-panel:hover {
  background: var(--glass-bg-hover);
}

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

.fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}

/* ===================================
   BASE STYLES
   =================================== */

/* Font Definitions */
/* Futura: system font on macOS/iOS, primary typeface for all text.
   Jost is bundled ONLY for the password placeholder alt-font glyph (?).
   It is NOT used as a general fallback—sans-serif handles non-Apple platforms. */

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-400-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-400-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-500-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-500-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Page Exit Animations */
@keyframes pageExit {
  0% { transform: translateY(0); }
  100% { transform: translateY(100vh); }
}

@keyframes slideUpExit {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100vh); }
}

.back-button-exit-active {
  animation: pageExit 0.5s ease forwards;
}

.home-page-exit-active {
  animation: slideUpExit 0.5s ease forwards;
}

/* Theme Toggle Button - Liquid Glass Style */
.theme-toggle {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease;
  z-index: 15; /* Below section-content (50) so sections naturally cover the toggle */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.theme-toggle:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.theme-toggle:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-toggle svg {
  width: 24px;
  height: 24px;
  fill: #c8c8c8;
  stroke: #c8c8c8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

/* Back Button Styles - Liquid Glass */
.back-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s ease;
}

.back-button:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

.back-button:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Section back buttons - fixed top-left */
.section-back {
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 100;
}

/* Back button icon - white in dark mode */
.back-button i {
  color: #ffffff;
}

/* ===================================
   LIGHT MODE STYLES
   =================================== */

body.light-mode {
  background: #f5f5f5;
  color: #1a1a1a;
}

/* Light Mode - Theme Toggle */
body.light-mode .theme-toggle {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.25) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -1px 1px rgba(0, 0, 0, 0.03);
}

body.light-mode .theme-toggle:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.35) 100%
  );
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    inset 0 -1px 1px rgba(0, 0, 0, 0.04);
}

body.light-mode .theme-toggle:active {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -1px 1px rgba(0, 0, 0, 0.03);
}

body.light-mode .theme-toggle svg {
  fill: #2a2a2a;
  stroke: #2a2a2a;
}

/* Light Mode - Back Button */
body.light-mode .back-button {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.25) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -1px 1px rgba(0, 0, 0, 0.03);
  color: #2a2a2a;
}

body.light-mode .back-button:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.35) 100%
  );
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    inset 0 -1px 1px rgba(0, 0, 0, 0.04);
  color: #000000;
}

body.light-mode .back-button:active {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -1px 1px rgba(0, 0, 0, 0.03);
  color: #000000;
}

/* Light mode - back button icon dark */
body.light-mode .back-button i {
  color: #131313;
}

/* Light Mode - Social Icons (Home Page Only) */
body.light-mode .social-icon {
  background-color: #e8e8e8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Light mode - show original dark icons for LinkedIn and Instagram */
body.light-mode #linkedin-logo img,
body.light-mode #instagram-logo img {
  filter: none !important;
}

body.light-mode #linkedin-logo:hover img,
body.light-mode #instagram-logo:hover img {
  filter: brightness(1.2) !important;
}

body.light-mode #linkedin-logo:active img,
body.light-mode #instagram-logo:active img {
  filter: brightness(0.8) !important;
}

/* Invert Substack in light mode (it's white, needs to be dark) */
body.light-mode #substack-logo img {
  filter: invert(1) !important;
}

body.light-mode #substack-logo:hover img {
  filter: invert(1) brightness(1.2) !important;
}

body.light-mode #substack-logo:active img {
  filter: invert(1) brightness(0.8) !important;
}

/* ===================================
   FOCUS-VISIBLE STYLES (Keyboard Nav)
   =================================== */

/* Global focus-visible ring for all interactive elements */
:focus-visible {
  outline: 2px solid var(--color-text-active);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Circular elements get circular outline */
.back-button:focus-visible,
.theme-toggle:focus-visible,
.social-icon:focus-visible,
.sheets-info-btn:focus-visible,
.diary-info-btn:focus-visible,
.publication-info-btn:focus-visible,
.wheel-center:focus-visible {
  outline: 2px solid var(--color-text-active);
  outline-offset: 3px;
  border-radius: var(--radius-full);
}

/* Pill-shaped elements */
.floating-button:focus-visible,
.playlist-nav-btn:focus-visible,
.subgenre-pill:focus-visible,
.search-bar:focus-visible,
.diary-password-input:focus-visible {
  outline: 2px solid var(--color-text-active);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ===================================
   TOUCH TARGET MINIMUMS (44px)
   =================================== */

/* Info buttons: visual circle stays small, invisible ::after expands touch target to 44px */
.sheets-info-btn,
.diary-info-btn {
  position: absolute;
  /* No min-width/min-height — let sections.css control the visible size */
}

.sheets-info-btn::after,
.diary-info-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

/* ===================================
   PREFERS-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;
  }

  /* Disable page exit animations */
  .back-button-exit-active,
  .home-page-exit-active {
    animation: none !important;
  }

  /* Disable hover transforms */
  .lift-on-hover:hover {
    transform: none;
  }
}

/* ===================================
   ULTRAWIDE DISPLAY CONSTRAINT
   =================================== */

@media (min-width: 1440px) {
  .section-inner,
  .writing-section,
  .diary-container,
  .moments-container {
    max-width: 1280px;
  }
}

/* ===================================
   TOUCH DEVICE FIXES
   Prevent hover states from sticking on tap
   =================================== */
@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Remove sticky scale/translate transforms on hover */
  .floating-button:hover,
  .social-icon:hover,
  .theme-toggle:hover,
  .back-button:hover,
  .sheets-link:hover,
  .sheets-link:focus,
  .dropdown-button:hover,
  .small-dropdown-button:hover,
  .genre-folder:hover,
  .playlist-nav-btn:hover,
  .publication-header:hover,
  .publication-info-btn:hover,
  .article-link:hover,
  .diary-playlist-item:hover {
    transform: none !important;
  }

  /* Reset publication header highlight on touch */
  .publication-header:hover {
    border-bottom-color: var(--glass-border, rgba(255, 255, 255, 0.15)) !important;
  }

  .publication-header:hover .heading {
    color: var(--color-text-muted, #999999) !important;
    text-shadow: none !important;
  }

  .publication-header:hover .dropdown-icon {
    color: var(--color-text-muted, #999999) !important;
  }

  /* Reset article link highlight on touch */
  .article-link:hover {
    color: var(--color-text, #c8c8c8) !important;
    background: transparent !important;
  }

  /* Reset sheets link hover */
  .sheets-link:hover,
  .sheets-link:focus {
    color: inherit !important;
  }

  .sheets-link:hover::after,
  .sheets-link:focus::after {
    box-shadow: none !important;
  }
}