/* ==========================================================================
   THE WATER PROJECT DESIGN SYSTEM 2025 - FONT SYSTEM
   ========================================================================== */

/* 
 * Comprehensive font system that includes all site fonts with proper
 * loading, fallbacks, and performance optimization. Works standalone
 * while respecting existing site-wide font preferences.
 */

/* ========================================
   FONT LOADING - PERFORMANCE OPTIMIZED
   ======================================== */

/* Adobe Typekit - Primary Brand Fonts */
@import url("https://p.typekit.net/p.css?s=1&k=ioj0xii&ht=tk&f=9755.10879.10884.10886&a=628922&app=typekit&e=css");

/* Google Fonts - Decorative and Alternative Fonts */
@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Montserrat:wght@200;300;400;500;600;700&display=swap');

/* Additional Modern Font Stacks - Performance Optimized */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Lexend:wght@300;400;500;600;700&display=swap');

/* ========================================
   TYPEKIT FONT FACE DECLARATIONS
   ======================================== */

/* Verveine - Decorative serif font */
@font-face {
    font-family: "verveine";
    src: url("https://use.typekit.net/af/e0b8b4/000000000000000000017690/27/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n4&v=3") format("woff2"),
         url("https://use.typekit.net/af/e0b8b4/000000000000000000017690/27/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n4&v=3") format("woff"),
         url("https://use.typekit.net/af/e0b8b4/000000000000000000017690/27/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n4&v=3") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

/* Futura PT - Primary brand font (Medium) */
@font-face {
    font-family: "futura-pt";
    src: url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n5&v=3") format("woff2"),
         url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n5&v=3") format("woff"),
         url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n5&v=3") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 500;
}

/* Futura PT - Primary brand font (Regular) */
@font-face {
    font-family: "futura-pt";
    src: url("https://use.typekit.net/af/9b05f3/000000000000000000013365/27/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n4&v=3") format("woff2"),
         url("https://use.typekit.net/af/9b05f3/000000000000000000013365/27/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n4&v=3") format("woff"),
         url("https://use.typekit.net/af/9b05f3/000000000000000000013365/27/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n4&v=3") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

/* Futura PT - Primary brand font (Light) */
@font-face {
    font-family: "futura-pt";
    src: url("https://use.typekit.net/af/ae4f6c/000000000000000000010096/27/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n3&v=3") format("woff2"),
         url("https://use.typekit.net/af/ae4f6c/000000000000000000010096/27/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n3&v=3") format("woff"),
         url("https://use.typekit.net/af/ae4f6c/000000000000000000010096/27/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n3&v=3") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 300;
}

/* ========================================
   FONT FAMILY APPLICATION
   ======================================== */

/* Apply font variables to motif wrapper and all children */
.motif-2025 {
  font-family: var(--font-primary);
}

.motif-2025 h1,
.motif-2025 h2,
.motif-2025 h3,
.motif-2025 h4,
.motif-2025 h5,
.motif-2025 h6,
.motif-2025 p,
.motif-2025 div:not(.fa):not(.fas):not(.far):not(.fab),
.motif-2025 span:not(.fa):not(.fas):not(.far):not(.fab),
.motif-2025 a,
.motif-2025 button,
.motif-2025 input,
.motif-2025 select,
.motif-2025 textarea {
  font-family: inherit;
}



/* Override for elements that should use secondary font */
.motif-2025 .font-secondary,
.motif-2025 [data-font="secondary"] {
  font-family: var(--font-secondary) !important;
}

/* ========================================
   FONT FAMILY VARIABLES
   ======================================== */

:root {
  /* Primary font stacks with comprehensive fallbacks */
  /* Montserrat is now the primary UI font; Futura PT deprecated for UI */
  --font-primary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-secondary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-cursive: "Covered By Your Grace", "Comic Sans MS", cursive;
  --font-decorative: "verveine", Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  
  /* Modern Font Stack Options */
  /* Stack 1: Tech Forward - Inter + Plus Jakarta Sans */
  --font-stack-tech-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-stack-tech-secondary: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Stack 2: Editorial - DM Sans + Space Grotesk */
  --font-stack-editorial-primary: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-stack-editorial-secondary: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Stack 3: Friendly - Outfit + Manrope */
  --font-stack-friendly-primary: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-stack-friendly-secondary: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Stack 4: Modern Minimal - Lexend + Bricolage Grotesque */
  --font-stack-minimal-primary: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-stack-minimal-secondary: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Theme-mapped demo variables (used by typography samples only) */
  --font-heading: var(--font-primary);
  --font-body: var(--font-primary);
  
  /* System font stack for maximum performance when needed */
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ========================================
   FONT SIZE SYSTEM (Enhanced)
   ======================================== */

:root {
  /* Responsive typography scale */
  --font-size-2xs: clamp(10px, 0.8vw, 11px);
  --font-size-xs: clamp(12px, 1vw, 13px);
  --font-size-sm: clamp(14px, 1.2vw, 15px);
  --font-size-base: clamp(16px, 1.4vw, 17px);
  --font-size-lg: clamp(18px, 1.6vw, 20px);
  --font-size-xl: clamp(20px, 2vw, 24px);
  --font-size-2xl: clamp(24px, 2.5vw, 28px);
  --font-size-3xl: clamp(28px, 3vw, 36px);
  --font-size-4xl: clamp(36px, 4vw, 48px);
  --font-size-5xl: clamp(48px, 5vw, 60px);
  
  /* Special purpose sizes */
  --font-size-hero: clamp(42px, 6vw, 72px);
  --font-size-display: clamp(60px, 8vw, 96px);
}

/* ========================================
   FONT WEIGHT MAPPING
   ======================================== */

:root {
  /* Map design system weights to available font weights */
  --font-weight-thin: 200;         /* Montserrat thin */
  --font-weight-light: 300;        /* futura-pt light, Montserrat light */
  --font-weight-normal: 400;       /* futura-pt regular, Montserrat regular */
  --font-weight-medium: 500;       /* futura-pt medium, Montserrat medium */
  --font-weight-semibold: 600;     /* Montserrat semibold */
  --font-weight-bold: 700;         /* Montserrat bold */
}

/* ========================================
   DESIGN SYSTEM FONT CLASSES
   ======================================== */

/* Base font family for the design system - only when no font stack is active */
.motif-2025:not([data-font-stack]) {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}

.motif-2025 {
  /* Base styling that applies regardless of font stack */
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  
  /* Optimize text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; /* Changed from optimizeSpeed which breaks icon fonts */
  font-feature-settings: "kern" 1;
}

/* Typography hierarchy with proper font stacks - only apply when no font stack is active */
.motif-2025:not([data-font-stack]) h1,
.motif-2025:not([data-font-stack]) h2,
.motif-2025:not([data-font-stack]) h3,
.motif-2025:not([data-font-stack]) h4,
.motif-2025:not([data-font-stack]) h5,
.motif-2025:not([data-font-stack]) h6 {
  font-family: var(--font-primary);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

/* Special font applications */
.motif-2025 .cursive_title {
  font-family: var(--font-cursive);
  font-weight: var(--font-weight-normal);
  font-style: normal;
}

/* ========================================
   THEME-SPECIFIC FONT ADJUSTMENTS
   ======================================== */

/* Subtle theme-specific typography adjustments */
/* Keep most typography consistent, only adjust weights and spacing slightly */

/* Typography sample font-face mapping per theme (scoped via variables) */
[data-theme="ocean-slate"] {
  --font-heading: var(--font-primary);
  --font-body: var(--font-primary);
}

[data-theme="warm-earth"] {
  --font-heading: var(--font-secondary);
  --font-body: var(--font-secondary);
}

[data-theme="bold-impact"] {
  --font-heading: var(--font-secondary);
  --font-body: var(--font-secondary);
}

[data-theme="field-map"] {
  --font-heading: var(--font-mono);
  --font-body: var(--font-secondary);
}

/* Ensure theme-scoped variables cascade into samples even if inline styles exist */
/* No longer needed—typography samples use fixed brand stack; keep variables for future */

/* Theme-specific typography differences removed for consistency */
/* All heading sizes and spacing are now consistent across themes */
/* Only font family should be affected by font-stack selector, not themes */

/* Font consistency - only font selector should affect fonts, not themes */

/* ========================================
   FONT LOADING OPTIMIZATION
   ======================================== */

/* Preload critical fonts for better performance */
.motif-2025 {
  /* Font loading hints */
  font-display: swap;
}

/* (Consolidated below) font loading helpers */

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Mobile typography adjustments */
@media (max-width: 767px) {
  .motif-2025 {
    /* Slightly larger base size for mobile readability */
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }
  
  .motif-2025 h1,
  .motif-2025 h2,
  .motif-2025 h3,
  .motif-2025 h4,
  .motif-2025 h5,
  .motif-2025 h6 {
    /* Better line height for mobile */
    line-height: var(--line-height-snug);
  }
}

/* Large screen typography enhancements */
@media (min-width: 1200px) {
  .motif-2025 {
    /* Optimize for larger screens */
    font-size: var(--font-size-lg);
  }
}

/* ========================================
   ACCESSIBILITY TYPOGRAPHY
   ======================================== */

/* High contrast mode font adjustments */
@media (prefers-contrast: high) {
  .motif-2025 {
    font-weight: var(--font-weight-medium);
  }
  
  .motif-2025 h1,
  .motif-2025 h2,
  .motif-2025 h3 {
    font-weight: var(--font-weight-bold);
  }
}

/* Reduced motion - disable any text animations */
@media (prefers-reduced-motion: reduce) {
  .motif-2025 * {
    text-decoration: none !important;
    animation: none !important;
  }
}

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

/* Font family utilities */
.motif-2025 .font-primary { font-family: var(--font-primary); }
.motif-2025 .font-secondary { font-family: var(--font-secondary); }
.motif-2025 .font-cursive { font-family: var(--font-cursive); }
.motif-2025 .font-decorative { font-family: var(--font-decorative); }
.motif-2025 .font-mono { font-family: var(--font-mono); }
.motif-2025 .font-system { font-family: var(--font-system); }

/* Demo font enforcement classes (override any competing rules) */
.motif-2025 .demo-font-futura { font-family: "futura-pt", "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }
.motif-2025 .demo-font-montserrat { font-family: "Montserrat", "futura-pt", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; }
.motif-2025 .demo-font-cursive { font-family: "Covered By Your Grace", cursive !important; }
.motif-2025 .demo-font-decorative { font-family: "verveine", Georgia, "Times New Roman", serif !important; }
.motif-2025 .demo-font-mono { font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace !important; }

/* Font weight utilities */
.motif-2025 .font-thin { font-weight: var(--font-weight-thin); }
.motif-2025 .font-light { font-weight: var(--font-weight-light); }
.motif-2025 .font-normal { font-weight: var(--font-weight-normal); }
.motif-2025 .font-medium { font-weight: var(--font-weight-medium); }
.motif-2025 .font-semibold { font-weight: var(--font-weight-semibold); }
.motif-2025 .font-bold { font-weight: var(--font-weight-bold); }

/* Font style utilities */
.motif-2025 .italic { font-style: italic; }
.motif-2025 .not-italic { font-style: normal; }

/* Text decoration utilities */
.motif-2025 .underline { text-decoration: underline; }
.motif-2025 .line-through { text-decoration: line-through; }
.motif-2025 .no-underline { text-decoration: none; }

/* Letter spacing utilities */
.motif-2025 .tracking-tight { letter-spacing: -0.025em; }
.motif-2025 .tracking-normal { letter-spacing: 0; }
.motif-2025 .tracking-wide { letter-spacing: 0.025em; }
.motif-2025 .tracking-wider { letter-spacing: 0.05em; }
.motif-2025 .tracking-widest { letter-spacing: 0.1em; }

/* Text transform utilities */
.motif-2025 .uppercase { text-transform: uppercase; }
.motif-2025 .lowercase { text-transform: lowercase; }
.motif-2025 .capitalize { text-transform: capitalize; }
.motif-2025 .normal-case { text-transform: none; }

/* ========================================
   FONT STACK SWITCHING - SIMPLIFIED
   ======================================== */

/* FONT SWITCHING - MAXIMUM SPECIFICITY */

/* Tech Forward - Inter for everything */
.motif-2025[data-font-stack="tech"],
.motif-2025[data-font-stack="tech"] *,
.motif-2025[data-font-stack="tech"] h1,
.motif-2025[data-font-stack="tech"] h2,
.motif-2025[data-font-stack="tech"] h3,
.motif-2025[data-font-stack="tech"] h4,
.motif-2025[data-font-stack="tech"] h5,
.motif-2025[data-font-stack="tech"] h6,
.motif-2025[data-font-stack="tech"] p,
.motif-2025[data-font-stack="tech"] div,
.motif-2025[data-font-stack="tech"] span,
.motif-2025[data-font-stack="tech"] button,
.motif-2025[data-font-stack="tech"] .btn {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Editorial - DM Sans for everything */
.motif-2025[data-font-stack="editorial"],
.motif-2025[data-font-stack="editorial"] *,
.motif-2025[data-font-stack="editorial"] h1,
.motif-2025[data-font-stack="editorial"] h2,
.motif-2025[data-font-stack="editorial"] h3,
.motif-2025[data-font-stack="editorial"] h4,
.motif-2025[data-font-stack="editorial"] h5,
.motif-2025[data-font-stack="editorial"] h6,
.motif-2025[data-font-stack="editorial"] p,
.motif-2025[data-font-stack="editorial"] div,
.motif-2025[data-font-stack="editorial"] span,
.motif-2025[data-font-stack="editorial"] button,
.motif-2025[data-font-stack="editorial"] .btn {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Friendly - Outfit for everything */
.motif-2025[data-font-stack="friendly"],
.motif-2025[data-font-stack="friendly"] *,
.motif-2025[data-font-stack="friendly"] h1,
.motif-2025[data-font-stack="friendly"] h2,
.motif-2025[data-font-stack="friendly"] h3,
.motif-2025[data-font-stack="friendly"] h4,
.motif-2025[data-font-stack="friendly"] h5,
.motif-2025[data-font-stack="friendly"] h6,
.motif-2025[data-font-stack="friendly"] p,
.motif-2025[data-font-stack="friendly"] div,
.motif-2025[data-font-stack="friendly"] span,
.motif-2025[data-font-stack="friendly"] button,
.motif-2025[data-font-stack="friendly"] .btn {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Minimal - Lexend for everything */
.motif-2025[data-font-stack="minimal"],
.motif-2025[data-font-stack="minimal"] *,
.motif-2025[data-font-stack="minimal"] h1,
.motif-2025[data-font-stack="minimal"] h2,
.motif-2025[data-font-stack="minimal"] h3,
.motif-2025[data-font-stack="minimal"] h4,
.motif-2025[data-font-stack="minimal"] h5,
.motif-2025[data-font-stack="minimal"] h6,
.motif-2025[data-font-stack="minimal"] p,
.motif-2025[data-font-stack="minimal"] div,
.motif-2025[data-font-stack="minimal"] span,
.motif-2025[data-font-stack="minimal"] button,
.motif-2025[data-font-stack="minimal"] .btn {
  font-family: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Preserve Font Awesome */
.motif-2025[data-font-stack] .fa,
.motif-2025[data-font-stack] .fas,
.motif-2025[data-font-stack] .far,
.motif-2025[data-font-stack] .fal,
.motif-2025[data-font-stack] .fab,
.motif-2025[data-font-stack] i[class*="fa-"] {
  font-family: FontAwesome !important;
}

/* ========================================
   SPECIAL TYPOGRAPHY PATTERNS
   ======================================== */

/* Mission text pattern - only when no font stack is active */
.motif-2025:not([data-font-stack]) .mission-text {
  font-family: var(--font-primary);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  font-weight: var(--font-weight-light);
  letter-spacing: -0.01em;
}

/* Lead text pattern - only when no font stack is active */
.motif-2025:not([data-font-stack]) .lead {
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}

/* Small text pattern */
.motif-2025 .small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-muted);
}

/* Meta text pattern */
.motif-2025 .meta {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-medium);
}

/* Highlight text pattern - theme-aware */
.motif-2025 .highlight {
  color: var(--primary);
  font-weight: var(--font-weight-medium);
  background: linear-gradient(transparent 60%, rgba(45, 100, 132, 0.2) 0);
  padding: 0 2px;
}

/* Theme-specific highlight colors */
[data-theme="ocean-slate"] .motif-2025 .highlight {
  background: linear-gradient(transparent 60%, rgba(45, 100, 132, 0.2) 0);
}

[data-theme="warm-earth"] .motif-2025 .highlight {
  background: linear-gradient(transparent 60%, rgba(47, 133, 90, 0.2) 0);
}

[data-theme="bold-impact"] .motif-2025 .highlight {
  background: linear-gradient(transparent 60%, rgba(6, 182, 212, 0.2) 0);
}

[data-theme="field-map"] .motif-2025 .highlight {
  background: linear-gradient(transparent 60%, rgba(58, 125, 68, 0.2) 0);
}

/* Quote text pattern */
.motif-2025 .quote {
  font-family: var(--font-decorative);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  color: var(--text-secondary);
}

/* Button text optimization - only when no font stack is active */
.motif-2025:not([data-font-stack]) .btn {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.025em; /* Tighter letter spacing for compact, professional look */
}

/* ========================================
   READING EXPERIENCE OPTIMIZATION
   ======================================== */

/* Long form content optimization - only when no font stack is active */
.motif-2025:not([data-font-stack]) .content-long-form {
  font-family: var(--font-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-loose);
  color: var(--text-secondary);
}

.motif-2025:not([data-font-stack]) .content-long-form h1,
.motif-2025:not([data-font-stack]) .content-long-form h2,
.motif-2025:not([data-font-stack]) .content-long-form h3 {
  font-family: var(--font-primary);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-lg);
}

.motif-2025 .content-long-form p {
  margin-bottom: var(--space-lg);
  max-width: 65ch; /* Optimal reading width */
}

/* Data display optimization */
.motif-2025 .content-data {
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Font loading strategies */
@supports (font-display: optional) {
  @font-face {
    font-family: "futura-pt-critical";
    src: local("futura-pt");
    font-display: optional; /* Only use if already downloaded */
  }
}

/* Reduce layout shift during font loading */
.motif-2025 {
  font-optical-sizing: auto;
  font-kerning: auto;
  font-variant-ligatures: common-ligatures contextual;
}

/* ========================================
   LEGACY COMPATIBILITY
   ======================================== */

/* Support existing cursive patterns */
.motif-2025 .cursive_title {
  font-family: var(--font-cursive);
  font-weight: var(--font-weight-normal);
  color: var(--primary);
}

/* Support existing Montserrat usage */
.motif-2025 .montserrat {
  font-family: var(--font-secondary);
}

/* Support existing system font usage */
.motif-2025 .system-font {
  font-family: var(--font-system);
}

/* ========================================
   FONT LOADING JAVASCRIPT HOOK
   ======================================== */

/* Classes for JavaScript font loading detection */
.motif-2025.fonts-loading {
  /* Style during font load */
  font-family: var(--font-system);
}

.motif-2025.fonts-loaded {
  /* Style after fonts load */
  font-family: var(--font-primary);
}

.motif-2025.fonts-failed {
  /* Fallback if fonts fail to load */
  font-family: var(--font-system);
}

/* ========================================
   PRINT TYPOGRAPHY
   ======================================== */

@media print {
  .motif-2025 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.4;
    color: #000000;
  }
  
  .motif-2025 h1 { font-size: 24pt; }
  .motif-2025 h2 { font-size: 20pt; }
  .motif-2025 h3 { font-size: 16pt; }
  .motif-2025 h4 { font-size: 14pt; }
  .motif-2025 h5 { font-size: 12pt; }
  .motif-2025 h6 { font-size: 11pt; }
}