/* ==========================================================================
   TetherBack Custom Fonts Integration
   Beautiful typography with Clash Display + Inter
   ========================================================================== */

/* Clash Display Font Family - Modern Display Font for Headings */
@font-face {
    font-family: 'Clash Display';
    src: url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Extralight.woff2') format('woff2'),
         url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Extralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Light.woff2') format('woff2'),
         url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Regular.woff2') format('woff2'),
         url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Medium.woff2') format('woff2'),
         url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Semibold.woff2') format('woff2'),
         url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Bold.woff2') format('woff2'),
         url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Variable Font for Modern Browsers */
@font-face {
    font-family: 'Clash Display Variable';
    src: url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Variable.woff2') format('woff2-variations'),
         url('/fonts/Clash Display/Fonts/WEB/fonts/ClashDisplay-Variable.woff') format('woff-variations');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}

/* Inter Font Family - Clean Interface Font for Body Text */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter/Inter-Thin-BETA.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter/Inter-ExtraLight-BETA.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter/Inter-Light-BETA.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   Font Stack Definitions
   ========================================================================== */

:root {
    /* Heading Font Stack - Clash Display for impact */
    --font-heading: 'Clash Display', 'Clash Display Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    
    /* Body Font Stack - Inter for readability */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    
    /* Monospace Font Stack - For code */
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* ==========================================================================
   Base Typography Classes
   ========================================================================== */

.font-heading {
    font-family: var(--font-heading);
    font-feature-settings: 'cv01', 'cv03', 'cv04', 'cv09';
    letter-spacing: -0.025em;
}

.font-body {
    font-family: var(--font-body);
    font-feature-settings: 'cv01', 'cv03', 'cv04', 'cv09';
}

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

/* ==========================================================================
   Enhanced Typography Utilities
   ========================================================================== */

.text-balance {
    text-wrap: balance;
}

.font-feature-default {
    font-feature-settings: 'cv01', 'cv03', 'cv04', 'cv09';
}

.font-feature-numbers {
    font-feature-settings: 'tnum', 'lnum';
}

.font-optical-sizing {
    font-optical-sizing: auto;
}

/* ==========================================================================
   Component-Specific Font Applications
   ========================================================================== */

/* Apply to all headings by default */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-feature-settings: 'cv01', 'cv03', 'cv04', 'cv09';
    letter-spacing: -0.025em;
}

/* Apply to body text */
body, p, span, div {
    font-family: var(--font-body);
    font-feature-settings: 'cv01', 'cv03', 'cv04', 'cv09';
}

/* Button text should use Inter for clarity */
button, .btn {
    font-family: var(--font-body);
    font-weight: 500;
}

/* Navigation text */
nav a {
    font-family: var(--font-body);
    font-weight: 500;
}

/* Form inputs */
input, textarea, select {
    font-family: var(--font-body);
}

/* ==========================================================================
   Font Loading Optimization
   ========================================================================== */

/* Preload critical fonts */
@media (prefers-reduced-motion: no-preference) {
    .font-heading {
        text-rendering: optimizeLegibility;
    }
    
    .font-body {
        text-rendering: optimizeSpeed;
    }
}

/* Font loading states */
.font-loading .font-heading,
.font-loading .font-body {
    visibility: hidden;
}

.fonts-loaded .font-heading,
.fonts-loaded .font-body {
    visibility: visible;
}