/**
 * Rautamai Studio Core - Performance & High-Fidelity Typography
 * 
 * Target: Zero-CLS Web Fonts, Variable Font Drivers, & Fluid Scale Systems
 * Architecture: BEM & Modern CSS Custom Properties
 * 
 * @package RautamaiCore
 */

/* ==========================================================================
   1. Self-Hosted Variable Font Declarations (WOFF2)
   ========================================================================== */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/inter-variable.woff2') format('woff2-variations');
    font-size-adjust: 0.5;
}

@font-face {
    font-family: 'Plus Jakarta Sans Variable';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../../fonts/plus-jakarta-variable.woff2') format('woff2-variations');
    font-size-adjust: 0.53;
}

/* ==========================================================================
   2. Zero-CLS Typography Design Tokens
   ========================================================================== */
:root {
    /* System-UI Fallback Stacks to Eliminate Layout Shifts */
    --rms-font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji';
    --rms-font-heading: 'Plus Jakarta Sans Variable', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    --rms-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Fluid Typography Scale (clamp(min, preferred, max)) */
    --rms-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --rms-text-sm: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
    --rms-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --rms-text-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.313rem);
    --rms-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --rms-text-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 1.95rem);
    --rms-text-3xl: clamp(1.875rem, 1.6rem + 1.38vw, 2.563rem);
    --rms-text-4xl: clamp(2.25rem, 1.85rem + 2vw, 3.25rem);

    /* Baseline Vertical Rhythms & Letter Spacing */
    --rms-lh-tight: 1.15;
    --rms-lh-snug: 1.3;
    --rms-lh-base: 1.6;

    --rms-tracking-tight: -0.02em;
    --rms-tracking-normal: 0em;
    --rms-tracking-wide: 0.025em;
}

/* ==========================================================================
   3. Global Font Rendering Optimizations
   ========================================================================== */
html {
    font-family: var(--rms-font-sans);
    font-size: 100%;
    
    /* Subpixel & Antialiased Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* Variable Font Optical Size Tuning */
    font-optical-sizing: auto;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Prevent layout shifts during WebFont hydration */
.wf-loading body {
    visibility: hidden;
}

/* ==========================================================================
   4. Typography Component Classes
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.rms-heading {
    font-family: var(--rms-font-heading);
    color: #0f172a;
    letter-spacing: var(--rms-tracking-tight);
    font-variation-settings: 'wght' 700;
    margin-top: 0;
}

h1, .rms-h1 {
    font-size: var(--rms-text-4xl);
    line-height: var(--rms-lh-tight);
}

h2, .rms-h2 {
    font-size: var(--rms-text-3xl);
    line-height: var(--rms-lh-snug);
}

h3, .rms-h3 {
    font-size: var(--rms-text-2xl);
    line-height: var(--rms-lh-snug);
}

p, .rms-body {
    font-size: var(--rms-text-base);
    line-height: var(--rms-lh-base);
    color: #334155;
    margin-bottom: 1.25em;
}

/* Monospace & Code Display */
code, pre, kbd {
    font-family: var(--rms-font-mono);
    font-size: var(--rms-text-sm);
    font-feature-settings: 'zero', 'ss01';
}

/* Gradient Display Headings */
.rms-text-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #4f46e5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}