/* A Lo Cubano Boulder Fest - Design 4: Typographic */

/* Import base design system */
@import url("/css/base.css");
@import url("/css/navigation.css");
@import url("/css/forms.css");

/* Import Google Fonts for experimental typography */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playfair+Display:ital,wght@0,400;0,900;1,400;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");

/* Custom Font Faces for Display Typography */
:root {
  --font-display: "Bebas Neue", sans-serif;
  --font-accent: "Playfair Display", serif;
  --font-code: "Space Mono", monospace;

  /* Typography-specific variables */
  --letter-spacing-tight: -0.05em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;
  --letter-spacing-widest: 0.2em;

  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
}

/* Base Typography Reset */
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  text-rendering: optimizeLegibility;
  font-feature-settings:
    "kern" 1,
    "liga" 1;
}

/* Typography-based Navigation */
/* Navigation styles moved to navigation.css */

body {
  margin: 0;
  padding: 0;
}

/* fadeInUp animation - used by other components */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Creative Text Layouts for Content */
.section-typographic {
  padding: var(--space-lg) 0;
  position: relative;
}

.text-composition {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.text-block-large {
  grid-column: span 8;
  font-family: var(--font-accent);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  font-weight: 900;
  color: var(--color-text-primary);
}

.text-block-large span {
  color: var(--color-blue);
  font-style: italic;
}

.text-block-vertical {
  grid-column: span 2;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-red);
  align-self: stretch;
  text-align: center;
}

.text-block-small {
  grid-column: span 4;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.text-block-mono {
  grid-column: span 6;
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-loose);
  background: var(--color-background-secondary);
  padding: var(--space-xl);
  border-left: 4px solid var(--color-blue);
}

/* Typographic Gallery */
.gallery-typographic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2xl);
  padding: var(--space-3xl) 0;
}

.gallery-item-type {
  position: relative;
  padding: var(--space-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  overflow: hidden;
}

.gallery-item-type::before {
  content: attr(data-number);
  position: absolute;
  top: -20px;
  right: -20px;
  font-family: var(--font-display);
  font-size: var(--font-size-8xl);
  line-height: 1;
  color: var(--color-background-secondary);
  z-index: 0;
}

.gallery-item-type:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
  transition: all var(--transition-slow);
}

.gallery-type-title {
  font-family: var(--font-accent);
  font-size: var(--font-size-2xl);
  font-weight: 900;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.gallery-type-meta {
  font-family: var(--font-code);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-lg);
}

.gallery-type-description {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  position: relative;
  z-index: 1;
}

/* About Page Section Anchors - Scroll offset for subnav links */
#the-beginning,
#the-team,
#join-our-team {
  scroll-margin-top: 120px;
}

/* Team Member Cards - Board Members Section */
.team-grid {
  grid-template-columns: repeat(2, 1fr);
}

.team-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-member-card::before {
  content: none !important;
}

.team-member-card .gallery-type-description {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.team-member-photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

/* Text-focused Form Elements */
.form-typographic {
  max-width: 600px;
  margin: 0 auto;
}

.form-group-type {
  margin-bottom: var(--space-2xl);
  position: relative;
}

.form-label-type {
  display: block;
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-sm);
  transition: all var(--transition-fast);
}

.form-input-type {
  width: 100%;
  padding: var(--space-md) 0;
  font-family: var(--font-accent);
  font-size: var(--font-size-xl);
  font-weight: 400;
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-border-medium);
  transition: all var(--transition-base);
}

.form-input-type:focus {
  outline: none;
  border-bottom-color: var(--color-blue);
}

.form-input-type:focus + .form-label-type {
  color: var(--color-blue);
}

.form-textarea-type {
  min-height: 150px;
  resize: vertical;
  font-family: var(--font-sans);
  line-height: var(--line-height-relaxed);
}

.form-button-type {
  display: inline-block;
  padding: var(--space-lg) var(--space-3xl);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-slow);
  text-decoration: none;
  will-change: transform;
}

.form-button-type::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-blue);
  transition: all var(--transition-slow);
  z-index: -1;
}

.form-button-type:hover {
  color: var(--color-text-inverse);
  border-color: var(--color-blue);
  transform: translateY(-2px);
}

.form-button-type:hover::before {
  left: 0;
}

/* Letter Animations and Effects */
.text-split {
  display: inline-block;
}

.text-split span {
  display: inline-block;
  transition: all var(--transition-fast);
}

.text-split:hover span {
  animation: letterDance 0.5s ease-in-out;
}

.text-split span:nth-child(odd) {
  animation-delay: 0.1s;
}

.text-split span:nth-child(even) {
  animation-delay: 0.2s;
}

@keyframes letterDance {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(-5deg);
  }
}

.text-glitch {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--font-size-5xl);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.text-glitch::before,
.text-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.text-glitch::before {
  animation: glitch-1 0.6s infinite;
  color: var(--color-blue);
  z-index: -1;
}

.text-glitch::after {
  animation: glitch-2 0.6s infinite;
  color: var(--color-red);
  z-index: -2;
}

@keyframes glitch-1 {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(20% 0 30% 0);
    transform: translate(-2px, 2px);
  }
  40% {
    clip-path: inset(50% 0 20% 0);
    transform: translate(2px, -2px);
  }
  60% {
    clip-path: inset(10% 0 60% 0);
    transform: translate(-2px, 0);
  }
  80% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(2px, 1px);
  }
}

@keyframes glitch-2 {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(2px, -1px);
  }
  40% {
    clip-path: inset(10% 0 70% 0);
    transform: translate(-2px, 1px);
  }
  60% {
    clip-path: inset(40% 0 40% 0);
    transform: translate(1px, 2px);
  }
  80% {
    clip-path: inset(5% 0 85% 0);
    transform: translate(-1px, -2px);
  }
}

/* Variable Font Features */
.text-variable {
  font-family: var(--font-accent);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  transition: all var(--transition-slow);
}

.text-variable:hover {
  font-variation-settings: "wght" 900;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-blue);
}

/* Text Masking Effects */
.text-mask {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--font-size-6xl);
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Typographic HR Divider */
.hr-typographic {
  border: none;
  margin: var(--space-3xl) 0;
  padding: 0;
  position: relative;
  text-align: center;
  height: var(--space-lg);
  overflow: visible;
}

.hr-typographic::before {
  content: "◊ ◊ ◊ ◊ ◊";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-accent);
  font-size: var(--font-size-lg);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-blue);
  background: var(--color-background);
  padding: 0 var(--space-lg);
}

.hr-typographic::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-border-medium) 25%,
    var(--color-border-medium) 75%,
    transparent 100%
  );
  z-index: -1;
}

/* Alternative typographic dividers */
.hr-typographic.style-text::before {
  content: "SALSA · CUBAN · BOULDER";
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-red);
}

.hr-typographic.style-minimal::before {
  content: "◆";
  font-size: var(--font-size-2xl);
  color: var(--color-text-primary);
}

.hr-typographic.style-display::before {
  content: "A LO CUBANO";
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-blue);
}

.hr-typographic.style-glitch::before {
  content: "▓▒░ 2026 ░▒▓";
  font-family: var(--font-code);
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-red);
  animation: glitchDivider 2s ease-in-out infinite;
}

@keyframes glitchDivider {
  0%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) skew(0deg);
  }
  25% {
    opacity: 0.8;
    transform: translate(-50%, -50%) skew(-1deg);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) skew(1deg);
  }
  75% {
    opacity: 0.9;
    transform: translate(-50%, -50%) skew(-0.5deg);
  }
}

/* Experimental Text Layouts */
.text-circular {
  position: relative;
  width: 300px;
  height: 300px;
  margin: var(--space-3xl) auto;
}

.text-circular svg {
  width: 100%;
  height: 100%;
  animation: rotateText 20s linear infinite;
}

@keyframes rotateText {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.text-circular text {
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  fill: var(--color-text-primary);
}

/* Footer Typography */
.footer-typographic {
  position: relative;
  padding: var(--space-lg) 0 var(--space-md);
  text-align: center;
  border-top: 1px solid var(--color-border);
}

/* .footer-wordmark - removed as per design update */

.footer-credits {
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  margin: var(--space-xs) 0;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-md);
}

.footer-credits a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.footer-credits a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

/* Footer Social Links */
.footer-social {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.social-link-type {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-tertiary);
  transition: all var(--transition-base);
  text-decoration: none;
}

.social-link-type:hover {
  color: var(--color-primary);
  transform: translateY(-2px);
}
.social-link-type svg {
  width: 24px;
  height: 24px;
}
.social-label {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
}

/* Footer Additional Styles */
.footer-content {
  max-width: 800px;
  margin: 0 auto;
}
.footer-tagline {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-lg);
  opacity: 0.8;
}
.footer-info {
  text-align: center;
}
.footer-copyright {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}
.footer-info a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}
.footer-info a:hover {
  color: var(--color-primary);
}

/* Typography effect classes used in tickets */
.text-gradient {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.text-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text-primary);
  text-stroke: 2px var(--color-text-primary);
}

.text-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-wide);
}

.text-glitch-bg {
  background: var(--color-text-primary);
  position: relative;
  overflow: hidden;
}

.text-glitch-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  transition: all var(--transition-slow);
  z-index: -1;
}

.text-glitch-bg:hover::before {
  left: 0;
}

.text-gradient-bg {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  border: 2px solid transparent;
  background-clip: padding-box;
}

.text-gradient-bg:hover {
  background: linear-gradient(45deg, var(--color-red), var(--color-blue));
  transform: translateY(-2px);
}

/* Ticket-specific hover fixes */
.pricing-card-type,
.addon-card-type,
.tier-card-type,
.stat-card-type,
.contact-card-type,
.policy-block-type {
  transition: all var(--transition-slow);
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.pricing-card-type:hover,
.addon-card-type:hover,
.tier-card-type:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-blue);
}

/* Additional ticket form styling */
.ticket-option-type,
.addon-checkbox-type {
  transition: all var(--transition-base);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.ticket-option-type:hover,
.addon-checkbox-type:hover {
  background-color: var(--color-background-secondary);
  transform: translateX(2px);
  border-color: var(--color-blue);
}

/* Pricing layout */
.pricing-typographic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-2xl);
  margin: var(--space-3xl) 0;
}

.pricing-card-type.featured {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-md);
  transform: scale(1.05);
}

.pricing-card-type.vip {
  border-color: var(--color-red);
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--color-background-secondary) 100%
  );
}

/* Add-ons layout */
.addons-typographic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-2xl) 0;
}

/* Group tiers layout */
.group-tiers-typographic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-2xl) 0;
}

/* Form styling */
.form-grid-type {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.form-grid-type .full-width {
  grid-column: 1 / -1;
}

/* Logo responsive styling */
@media (max-width: 768px) {
  .typographic .logo-text {
    font-size: var(--font-size-2xl);
    gap: var(--space-xs);
  }

  .typographic .logo-main,
  .typographic .logo-sub {
    font-size: var(--font-size-base);
  }

  .typographic .logo-separator {
    font-size: var(--font-size-lg);
  }
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
  .text-composition {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile Responsive Typography */
@media (max-width: 768px) {
  .nav-menu-type {
    gap: var(--space-lg);
  }

  .nav-menu-type a {
    font-size: var(--font-size-xs);
  }

  .text-composition {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .text-block-large,
  .text-block-vertical,
  .text-block-small,
  .text-block-mono {
    grid-column: span 1;
  }

  .text-block-vertical {
    writing-mode: horizontal-tb;
    text-align: left;
  }

  .text-glitch {
    font-size: var(--font-size-3xl);
  }

  /* .footer-wordmark - removed */
}

@media (max-width: 480px) {
  .hero-typographic {
    padding: var(--space-3xl) var(--space-sm);
  }

  .hero-subtitle {
    font-size: var(--font-size-sm);
    white-space: normal;
  }

  .gallery-typographic {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-member-photo {
    width: 150px;
    height: 150px;
  }

  .form-input-type {
    font-size: var(--font-size-lg);
  }

  /* Mobile logo adjustments */
  .typographic .logo-text {
    font-size: var(--font-size-xl);
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

  .typographic .logo-main {
    font-size: var(--font-size-sm);
  }

  .typographic .logo-separator {
    display: none;
  }

  .typographic .logo-sub {
    font-size: var(--font-size-xs);
    opacity: 0.8;
  }

  /* Mobile ticket styling */
  .form-button-type {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-base);
    width: 100%;
    text-align: center;
  }

  .pricing-card-type,
  .addon-card-type {
    padding: var(--space-lg);
  }

  /* Mobile pricing layout */
  .pricing-typographic {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .pricing-card-type.featured {
    transform: none;
    order: -1;
  }

  .addons-typographic,
  .group-tiers-typographic {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .form-grid-type {
    grid-template-columns: 1fr;
  }

  .text-outline {
    -webkit-text-stroke: 1px var(--color-text-primary);
    text-stroke: 1px var(--color-text-primary);
  }
}

/* Print Styles for Typography */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: var(--color-text-primary);
    background: var(--color-background);
  }

  .nav-typographic,
  .text-glitch::before,
  .text-glitch::after {
    display: none;
  }

  .hero-title-massive {
    font-size: 48pt;
    page-break-after: avoid;
  }

  .text-block-large {
    font-size: 24pt;
  }

  .text-mask {
    -webkit-text-fill-color: var(--color-text-primary);
    text-fill-color: var(--color-text-primary);
  }
}

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

  .text-circular svg {
    animation: none;
  }

  .hero-subtitle {
    animation: none;
    max-width: 100%;
    border-right: none;
  }
}

/* ==========================================================================
   DARK MODE TYPOGRAPHY OVERRIDES
   ========================================================================== */

[data-theme="dark"] {
  /* Typography-specific dark mode variables */
  --text-composition-bg: var(--color-background);
  --text-block-mono-bg: var(--color-background-secondary);
  --text-block-mono-border: var(--color-blue);
  --gallery-item-type-bg: var(--color-surface);
  --gallery-item-type-border: var(--color-border);
  --gallery-item-type-number: var(--color-background-secondary);
  --form-input-type-border: var(--color-border-medium);
  --hr-typographic-bg: var(--color-background);
  --text-circular-fill: var(--color-text-primary);
}

/* Text Composition Components */
[data-theme="dark"] .text-block-mono {
  background: var(--text-block-mono-bg);
  border-left-color: var(--text-block-mono-border);
}

/* Gallery Typography */
[data-theme="dark"] .gallery-item-type {
  background: var(--gallery-item-type-bg);
  border-color: var(--gallery-item-type-border);
}

[data-theme="dark"] .gallery-item-type::before {
  color: var(--gallery-item-type-number);
}

[data-theme="dark"] .gallery-item-type:hover {
  box-shadow: var(--shadow-xl);
}

/* Form Elements Typography */
[data-theme="dark"] .form-input-type,
[data-theme="dark"] .form-textarea-type {
  border-bottom-color: var(--form-input-type-border);
  color: var(--color-text-primary);
  background: transparent;
}

[data-theme="dark"] .form-input-type:focus,
[data-theme="dark"] .form-textarea-type:focus {
  border-bottom-color: var(--color-blue);
}

[data-theme="dark"] .form-input-type:focus + .form-label-type {
  color: var(--color-blue);
}

[data-theme="dark"] .volunteer-form-typographic {
  background: var(--color-surface);
  border-color: var(--color-text-primary);
}

/* Button Typography */
[data-theme="dark"] .form-button-type {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-text-primary);
}

[data-theme="dark"] .form-button-type::before {
  background: var(--color-secondary);
}

[data-theme="dark"] .form-button-type:hover {
  color: var(--color-white);
  border-color: var(--color-text-primary);
}

[data-theme="dark"] .volunteer-submit {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .volunteer-submit:hover {
  background: var(--color-secondary);
}

/* Text Effects */
[data-theme="dark"] .text-mask {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

[data-theme="dark"] .text-glitch::before {
  color: var(--color-blue);
}

[data-theme="dark"] .text-glitch::after {
  color: var(--color-red);
}

/* Typographic HR Dividers */
[data-theme="dark"] .hr-typographic::before {
  background: var(--hr-typographic-bg);
  color: var(--color-blue);
}

[data-theme="dark"] .hr-typographic.style-text::before {
  color: var(--color-red);
}

[data-theme="dark"] .hr-typographic.style-minimal::before {
  color: var(--color-text-primary);
}

[data-theme="dark"] .hr-typographic.style-display::before {
  color: var(--color-blue);
}

[data-theme="dark"] .hr-typographic.style-glitch::before {
  color: var(--color-red);
}

/* Circular Text */
[data-theme="dark"] .text-circular text {
  fill: var(--text-circular-fill);
}

/* Footer Typography */
[data-theme="dark"] .footer-typographic {
  border-top-color: var(--color-border);
}

[data-theme="dark"] .footer-credits {
  color: var(--color-text-tertiary);
}

[data-theme="dark"] .footer-credits a {
  color: inherit;
}

[data-theme="dark"] .footer-credits a:hover {
  color: var(--color-blue);
}

[data-theme="dark"] .social-link-type {
  color: var(--color-text-tertiary);
}

[data-theme="dark"] .social-link-type:hover {
  color: var(--color-primary);
}

/* Typography Effects Classes */
[data-theme="dark"] .text-gradient {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

[data-theme="dark"] .text-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text-primary);
  text-stroke: 2px var(--color-text-primary);
}

[data-theme="dark"] .text-glitch-bg {
  background: var(--color-text-primary);
}

[data-theme="dark"] .text-glitch-bg::before {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
}

[data-theme="dark"] .text-gradient-bg {
  background: linear-gradient(45deg, var(--color-blue), var(--color-red));
  border-color: transparent;
}

[data-theme="dark"] .text-gradient-bg:hover {
  background: linear-gradient(45deg, var(--color-red), var(--color-blue));
}

/* Card Components Typography */
[data-theme="dark"] .pricing-card-type,
[data-theme="dark"] .addon-card-type,
[data-theme="dark"] .tier-card-type,
[data-theme="dark"] .stat-card-type,
[data-theme="dark"] .contact-card-type,
[data-theme="dark"] .policy-block-type {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .pricing-card-type:hover,
[data-theme="dark"] .addon-card-type:hover,
[data-theme="dark"] .tier-card-type:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-blue);
}

[data-theme="dark"] .pricing-card-type.featured {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .pricing-card-type.vip {
  border-color: var(--color-red);
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--color-background-secondary) 100%
  );
}

/* Option Components */
[data-theme="dark"] .ticket-option-type,
[data-theme="dark"] .addon-checkbox-type {
  border-color: var(--color-border);
  background: var(--color-surface);
}

[data-theme="dark"] .ticket-option-type:hover,
[data-theme="dark"] .addon-checkbox-type:hover {
  background-color: var(--color-background-secondary);
  border-color: var(--color-blue);
}

/* Checkbox Components */
[data-theme="dark"] .checkbox-type {
  color: var(--color-text-primary);
}

/* Mobile Typography Adjustments */
@media (max-width: 480px) {
  [data-theme="dark"] .text-outline {
    -webkit-text-stroke: 1px var(--color-text-primary);
    text-stroke: 1px var(--color-text-primary);
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  [data-theme="dark"] .text-mask {
    background: none;
    -webkit-text-fill-color: currentColor;
    text-fill-color: currentColor;
  }

  [data-theme="dark"] .form-input-type {
    border-bottom-width: 3px;
  }

  [data-theme="dark"] .gallery-item-type {
    border-width: 2px;
    border-color: var(--color-text-primary);
  }
  
  [data-theme="dark"] .text-gradient,
  [data-theme="dark"] .text-gradient-bg {
    background: none;
    -webkit-text-fill-color: currentColor;
    text-fill-color: currentColor;
    background-color: var(--color-text-primary);
  }
}
