/**
 * LarkSpur Industries - Font Configuration
 * 
 * This file manages all custom fonts for the website.
 * Place font files in: content/fonts/
*
 * Current setup: Ubuntu (Google Fonts)
 * Regular 400 for body, Medium 500 for headings
 */

/* ========================================
   GOOGLE FONTS - UBUNTU
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


/* ========================================
   FONT STACK VARIABLES
   ======================================== */

:root {
    /* 
     * Main Body Font
     * Ubuntu Regular (400 weight)
     */
    --font-main: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* 
     * Heading Font
     * Ubuntu Medium (500 weight) for better hierarchy
     */
    --font-heading: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* 
     * Code/Technical Font
     * Keep monospace for code blocks and technical specs
     */
    --font-code: 'Ubuntu Mono', 'Courier New', Courier, monospace;
    
    /* 
     * UI Font (buttons, labels, etc.)
     * Ubuntu Regular for consistency
     */
    --font-ui: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

body {
    font-family: var(--font-main);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500; /* Ubuntu Medium */
}

.product-name,
.header,
.project-title {
    font-weight: 500; /* Ubuntu Medium for emphasis */
}

code, pre, .spec-key, .spec-val {
    font-family: var(--font-code);
}

button, .btn, input, select, textarea {
    font-family: var(--font-ui);
}

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

/* 
 * Optional: Prevent FOUT (Flash of Unstyled Text)
 * Uncomment if using web fonts
 */
/*
.fonts-loading body {
    opacity: 0;
}

.fonts-loaded body {
    opacity: 1;
    transition: opacity 0.2s;
}
*/