/**
 * GDPR COMPLIANT MEDITERRANEAN DESIGN SYSTEM TOKENS
 * Optimized for 8px Modular Scale and High-End Luxury Performance.
 */

/* ==========================================================================
   1. LOCAL FONT-FACE DECLARATIONS
   ========================================================================== */

@font-face {
    font-family: "Albert Sans";
    src: url("../fonts/albert-sans-regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Albert Sans";
    src: url("../fonts/albert-sans-medium.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Albert Sans";
    src: url("../fonts/albert-sans-bold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
    font-family: "Urbanist";
    src: url("../fonts/urbanist-light.woff2") format("woff2");
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Urbanist";
    src: url("../fonts/urbanist-regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Urbanist";
    src: url("../fonts/urbanist-medium.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}

/* ==========================================================================
   2. SYSTEM VARS ENGINE (8px Grid Aligned)
   ========================================================================== */
:root {
    /* Base unit */
    --base: 8px;

    /* Color Palette - Premium Prussian Sea Architecture */
    --color-bg: #f4f8fa;       
    --color-surface: #FFFFFF;     
    --color-text-main: #023047;     /* Deep Prussian Blue */
    --color-text-main-rgb: 2 48 71; /* Pure RGB Triplet for dynamic alpha masks */
    --color-text-muted: #475569;    /* Muted Slate Blue-Gray */
    --color-accent: #ffb703;        /* High-Authority Selective Yellow Accent */
    --color-accent-subtle: #fb8500; /* Subtle Component Matching Accent */
    --color-border: #8ecae6;        /* Soft Light Sky Blue Border Matrix */
    --color-card-bg: #e2e8f0;     

    /* Geometry & Spacing */
    --space-xs: calc(var(--base) * 1);  
    --space-sm: calc(var(--base) * 2);  
    --space-md: calc(var(--base) * 4);  
    --space-lg: calc(var(--base) * 8);  
    --space-xl: calc(var(--base) * 12); 

    --radius-bento: 20px;        
    --radius-card: 8px;    
    --radius-ui: 4px;             

    --font-display: "Urbanist", system-ui, sans-serif;
    --font-ui: "Albert Sans", system-ui, sans-serif;

    --text-h1: clamp(2.5rem, 6.2vw, 4.5rem);
    --text-h2: clamp(1.65rem, 3.8vw, 3rem);
    --text-body: clamp(0.95rem, 1.1vw, 1.125rem);
    --text-meta: 0.75rem; 

    --transition-premium: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Global Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ==========================================================================
   3. REGLAS DE CONTROL DE CASCADA CANÓNICA (Zero !important)
   ========================================================================== */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-premium);
}

a:visited {
    color: inherit;
}