/* ============================================
   VTO READING - DESIGN SYSTEM
   Single source of truth for brand values
   ============================================ */

:root {
    /* ==================
       BRAND COLORS
       ================== */
    
    /* Primary */
    --vto-navy: #022944;
    --vto-navy-light: #0a3a5c;
    --vto-teal: #08C0DE;
    --vto-teal-dark: #0092C8;
    --vto-orange: #F78F38;
    --vto-gold: #F78F38;
    --vto-gold-dark: #d97a2a;
    
    /* Semantic */
    --vto-red: #DD4031;
    --vto-burgundy: #9B2E38;
    --vto-green: #4caf7c;
    --vto-coral: #E35E45;
    
    /* Backgrounds */
    --vto-cream: #faf9f7;
    --vto-cream-warm: #f5f2ed;
    
    /* ==================
       TYPOGRAPHY
       ================== */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    
    /* ==================
       SPACING
       ================== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* ==================
       BORDERS
       ================== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 100px;
    
    /* ==================
       SHADOWS
       ================== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.25);
    
    /* ==================
       TRANSITIONS
       ================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ==================
   BASE STYLES
   ================== */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* App pages use DM Sans throughout */
.app-page h1, .app-page h2, .app-page h3, 
.app-page h4, .app-page h5, .app-page h6 {
    font-family: var(--font-body);
    font-weight: 600;
}

/* Landing/marketing pages use Fraunces for headings */
.marketing-page h1, .marketing-page h2, 
.marketing-page h3, .marketing-page h4 {
    font-family: var(--font-display);
    font-weight: 600;
}