@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Merriweather:ital,wght@0,300..900;1,300..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

:root {
    /* Font Families */
    --font-family-base: 'Jost', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: 'Playfair Display', 'Times New Roman', serif;
    --font-family-serif: 'Merriweather', Georgia, serif;
    --font-family-alt: 'Lora', Georgia, serif;

    /* Font Sizes (px) */
    --font-size-xs: 12px;       
    --font-size-sm: 14px;       
    --font-size-base: 16px;     
    --font-size-lg: 18px;      
    --font-size-xl: 24px;      
    --font-size-2xl: 32px;      
    --font-size-3xl: 48px;      
    --font-size-4xl: 56px; 
    --font-size-5xl: 64px;
    --font-size-hero: 80px;    


    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-snug: 1.4;
    --line-height-relaxed: 1.7;

    /* Color Palette */
    --color-bg-primary: #031611;
    --color-bg-secondary: #041312;
    --color-surface: #03120D;
    --color-surface-soft: #041A14;
    --color-overlay: rgba(0, 0, 0, 0.75);

    --color-text-primary: #FFFFFF;
    --color-text-secondary: #D1D1D1;
    --color-text-muted: #84A1A0;
    --color-text-accent: #C9D7D1;
    --color-text-white-30:#FFFFFF4D;

    --color-gold: #AB984C;
    --color-gold-bold:#F5C84F;
    --color-gold-light: #FFEDBF;
    --color-gold-soft: #D3B564;
    --color-amber: #EFD9A8;

    --color-border: rgba(171, 152, 76, 0.4);
    --color-border-soft: rgba(171, 152, 76, 0.18);
    --color-border-muted: rgba(217, 217, 217, 0.05);
    --color-gold-glow: rgba(171, 152, 76, 0.08);
    --color-gold-tint: rgba(171, 152, 76, 0.1);
    --color-gold-strong: rgba(171, 152, 76, 0.2);
    --color-green-surface: rgba(31, 63, 54, 0.6);
    --color-green-surface-strong: rgba(31, 63, 54, 0.8);
    --color-white-soft: rgba(255, 255, 255, 0.6);
    --color-white-faint: rgba(255, 255, 255, 0.3);
    --color-white-line: rgba(255, 255, 255, 0.2);
    --color-white-placeholder: rgba(255, 255, 255, 0.4);
    --color-overlay-team: rgba(4, 19, 18, 0.65);

    /* Gradients */
    --gradient-about-banner: linear-gradient(135deg, rgba(2, 18, 13, 0.87), rgba(2, 22, 17, 0.85), rgba(2, 18, 13, 0.87));

    /* Spacing Scale (px) */
    --space-2xs: 4px;           
    --space-xs: 8px;           
    --space-sm: 12px;          
    --space-md: 16px;           
    --space-lg: 24px;           
    --space-xl: 32px;          
    --space-2xl: 48px;         
    --space-3xl: 64px;          
    --space-4xl: 80px;   
    --space-5xl:120px;     


    /* Layout */
    --max-width-container: 1400px;
    --frame-offset: 48px;

    /* Effects */
    --transition-base: 0.3s ease;
    --border-radius-sm: 2px;
}