/* Global Styles */
/* All other rules previously here have been migrated to Tailwind classes in components. */

/* Font loading optimization */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* CSS Custom Properties and Theme Variables */
:root {
    --font-heading-primary: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: 'Space Mono', 'Courier New', monospace;
    
    /* CryptoVersus branding colors */
    --cv-primary-500: #F4AA21;
    --cv-primary-600: #E09915;
    --cv-primary-700: #CC8710;
}

/* Ensure fonts are available immediately */
@font-face {
    font-family: 'Sora';
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-display: swap;
}

@font-face {
    font-family: 'Space Mono';
    font-display: swap;
}

/* Global Body Styling */
body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    background-color:black !important; /* --background */
    color: hsl(0 0% 98%) !important; /* --foreground */
}

/* Global Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fadeIn {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.motion-safe\:animate-fadeInUp {
    animation: fadeInUp 1s ease-in-out;
}

/* Typography Hierarchy */

p, div, span, .text-body {
    font-family: var(--font-body);
    line-height: 1.6;
}

/* H4-H6: Roboto */
h4, h5, h6,
.h4, .h5, .h6 {
    font-family: var(--font-body) !important;
}

h4, .h4 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
}

h5, .h5 {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
}

h6, .h6 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
}

/* H1-H3: Sora - Higher specificity with !important */
h1, h2, h3,
.h1, .h2, .h3 {
    font-family: var(--font-heading-primary) !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h1, .h1 {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-heading-primary) !important;
}

h2, .h2 {
    font-size: 2rem;
    font-weight: 600;
    font-family: var(--font-heading-primary) !important;
}

h3, .h3 {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--font-heading-primary) !important;
}

/* Accents & Code: Space Mono */
code, pre, kbd, samp,
.font-mono, .text-code, .code,
.accent-text, .accent {
    font-family: var(--font-accent);
    font-weight: 400;
}

/* Utility classes for easy application */
.font-heading-primary {
    font-family: var(--font-heading-primary) !important;
}

.font-body {
    font-family: var(--font-body) !important;
}

.font-accent {
    font-family: var(--font-accent) !important;
}

/* Override Tailwind's default font classes */
.font-sans {
    font-family: var(--font-body) !important;
}

.font-mono {
    font-family: var(--font-accent) !important;
}

/* Additional overrides for common Tailwind text classes */
.text-4xl, .text-5xl, .text-6xl {
    font-family: var(--font-heading-primary) !important;
}

.text-3xl, .text-2xl, .text-xl {
    font-family: var(--font-heading-primary) !important;
}

/* Very specific overrides to ensure Sora loads */
h1.text-4xl, h1.text-5xl, h1.text-6xl {
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Force Sora on any large heading elements */
*[class*="text-4xl"], *[class*="text-5xl"], *[class*="text-6xl"] {
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Debug: Test if Sora is loading - you can remove this later */
.test-sora-font {
    font-family: 'Sora', serif !important;
    font-weight: 700 !important;
    color: red !important;
}

/* Card and Container Styles */
.container-bg, .card, .inner-card {
    background-color: #2C2C2E;
    border: none;
}

/* Global Text Color Utilities */
.text-primary {
    color: hsl(0 0% 98%);
}

.text-muted {
    color: hsl(240 5% 64.9%);
}

/* Global Image Styles */
.section-image {
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    max-width: 100%;
    height: auto;
    _filter: grayscale(1);
}

/* Call-to-Action Styles */
.cta-secondary, .btn-secondary {
    background-color: transparent;
    color: var(--cv-primary-500, #F4AA21);
    border: 2px solid var(--cv-primary-500, #F4AA21);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.cta-secondary:hover, .btn-secondary:hover {
    background-color: var(--cv-primary-500, #F4AA21);
    color: #000;
}

/* Accent color utility classes */
.text-accent, .text-cta {
    color: var(--cv-primary-500, #F4AA21);
}

.bg-accent, .bg-cta {
    background-color: var(--cv-primary-500, #F4AA21);
}

.border-accent, .border-cta {
    border-color: var(--cv-primary-500, #F4AA21);
}

/* Responsive typography */
@media (max-width: 768px) {
    h1, .h1 {
        font-size: 2rem;
    }
    
    h2, .h2 {
        font-size: 1.75rem;
    }
    
    h3, .h3 {
        font-size: 1.25rem;
    }
} 

.gold-highlight-hero {
  filter: sepia(0.9) hue-rotate(-10deg) saturate(2.25) brightness(0.5) !important;
} 

.gold-highlight {
  filter: grayscale(1) sepia(0.11) hue-rotate(-9deg) saturate(12) brightness(1.5);
  filter: grayscale(1) sepia(.1) hue-rotate(-10deg) saturate(15) contrast(1.05) brightness(2);
} 

/*
  This CSS handles centering the last row of items in card grids
  for both 2-column and 3-column layouts across different screen sizes.
*/

/*
  For 2-column grids, this centers the last item if it's on a row by itself.
  This rule applies from the medium breakpoint and up.
*/
@media (min-width: 768px) {
  .card-grid[class*="md:grid-cols-2"] > :last-child:nth-child(odd) {
    grid-column: span 2 / span 2;
    justify-self: center;
    width: 50%; /* Prevents the card from stretching full-width */
  }
}

/*
  For 3-column grids, this handles cases where the last row
  has one or two items.
  This rule applies from the large breakpoint and up.
*/
@media (min-width: 1024px) {
  /* Handles one item on the last row */
  .card-grid[class*="lg:grid-cols-3"] > :last-child:nth-child(3n + 1) {
    grid-column-start: 2;
  }

  /* Handles two items on the last row by spacing them apart */
  .card-grid[class*="lg:grid-cols-3"] > :nth-child(3n + 1):nth-last-child(2) {
    grid-column-start: 1;
  }
  .card-grid[class*="lg:grid-cols-3"] > :nth-child(3n + 2):nth-last-child(1) {
    grid-column-start: 3;
  }
}