/**
 * Typography & Colors System
 * Based on Dacia Digital Standard Guide
 * Step 1: Generic specifications
 */

/* ============================================
   FONT FAMILY - Dacia Block (Main Typeface)
   ============================================ */
@font-face {
    font-family: 'Dacia Block';
    src: url('../fonts/DaciaBlock-Light.woff2') format('woff2'),
         url('../fonts/DaciaBlock-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dacia Block';
    src: url('../fonts/DaciaBlock-Regular.woff2') format('woff2'),
         url('../fonts/DaciaBlock-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dacia Block';
    src: url('../fonts/DaciaBlock-Bold.woff2') format('woff2'),
         url('../fonts/DaciaBlock-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Dacia Block Variable Font */
@font-face {
    font-family: 'Dacia Block';
    src: url('../fonts/DaciaBlock-Variable.woff2') format('woff2'),
         url('../fonts/DaciaBlock-Variable.woff') format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Dacia Block Extended */
@font-face {
    font-family: 'Dacia Block Extended';
    src: url('../fonts/DaciaBlockExtended-Light.woff2') format('woff2'),
         url('../fonts/DaciaBlockExtended-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dacia Block Extended';
    src: url('../fonts/DaciaBlockExtended-Regular.woff2') format('woff2'),
         url('../fonts/DaciaBlockExtended-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dacia Block Extended';
    src: url('../fonts/DaciaBlockExtended-Bold.woff2') format('woff2'),
         url('../fonts/DaciaBlockExtended-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   FONT FAMILY - Read (Jobbing Typeface)
   ============================================ */
@font-face {
    font-family: 'Read Font';
    src: url('../fonts/Read-Light_V3000.woff2') format('woff2'),
         url('../fonts/Read-Light_V3000.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Read Font';
    src: url('../fonts/Read-LightItalic_V3000.woff2') format('woff2'),
         url('../fonts/Read-LightItalic_V3000.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Read Font';
    src: url('../fonts/Read-Regular_V3000.woff2') format('woff2'),
         url('../fonts/Read-Regular_V3000.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Read Font';
    src: url('../fonts/Read-Italic_V3000.woff2') format('woff2'),
         url('../fonts/Read-Italic_V3000.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Read Font';
    src: url('../fonts/Read-Medium_V3000.woff2') format('woff2'),
         url('../fonts/Read-Medium_V3000.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Read Font';
    src: url('../fonts/Read-MediumItalic_V3000.woff2') format('woff2'),
         url('../fonts/Read-MediumItalic_V3000.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Read Font';
    src: url('../fonts/Read-Bold_V3000.woff2') format('woff2'),
         url('../fonts/Read-Bold_V3000.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Read Font';
    src: url('../fonts/Read-BoldItalic_V3000.woff2') format('woff2'),
         url('../fonts/Read-BoldItalic_V3000.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Legacy alias for backward compatibility */
@font-face {
    font-family: 'Read';
    src: url('../fonts/Read-Regular_V3000.woff2') format('woff2'),
         url('../fonts/Read-Regular_V3000.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Apply Read Font to all elements (jobbing typeface for body text) */
html,
body {
    font-family: 'Read Font', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

* {
    font-family: 'Read Font', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Apply Dacia Block for headings, titles, vehicle names */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.vehicle-name,
.main-title,
.headline,
.tagline {
    font-family: 'Dacia Block', 'Read Font', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ============================================
   TYPOGRAPHY SCALE - Headings
   ============================================ */

/* Desktop Headings */
h1, .h1 {
    /* PETA */
    font-size: 100px;
    line-height: 80px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

h2, .h2 {
    /* TERA */
    font-size: 50px;
    line-height: 40px;
    font-weight: 700;
    text-transform: lowercase;
    text-align: center;
}

h3, .h3,
h4, .h4,
h5, .h5 {
    /* GIGA, MEGA, KILO */
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
}

h3, .h3 {
    /* GIGA */
    font-size: 36px;
    line-height: 38px;
}

h4, .h4 {
    /* MEGA */
    font-size: 28px;
    line-height: 32px;
}

h5, .h5 {
    /* KILO */
    font-size: 24px;
    line-height: 28px;
}

h6, .h6 {
    /* HECTO */
    font-size: 20px;
    line-height: 18px;
    font-weight: 400;
}

.deca-text {
    /* DECA */
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
}

/* Mobile Headings */
@media (max-width: 768px) {
    h1, .h1 {
        /* PETA mobile */
        font-size: 40px;
        line-height: 35px;
    }
    
    h2, .h2 {
        /* TERA mobile */
        font-size: 36px;
        line-height: 32px;
        font-weight: 400;
    }
    
    h3, .h3 {
        /* GIGA mobile */
        font-size: 28px;
        line-height: 32px;
    }
    
    h4, .h4 {
        /* MEGA mobile */
        font-size: 24px;
        line-height: 28px;
    }
    
    h5, .h5 {
        /* KILO mobile */
        font-size: 20px;
        line-height: 24px;
    }
    
    h6, .h6 {
        /* HECTO mobile - same as desktop */
        font-size: 20px;
        line-height: 18px;
    }
    
    .deca-text {
        /* DECA mobile - same as desktop */
        font-size: 18px;
        line-height: 20px;
    }
}

/* ============================================
   TYPOGRAPHY SCALE - Body Text
   ============================================ */

/* Base - Main body text */
.base-text,
body {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

/* Mention - Secondary text */
.mention-text {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
}

/* Nav - Navigation text */
.nav-text {
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
}

/* Sous-mention - Small text */
.sous-mention-text {
    font-size: 12px;
    line-height: 15px;
    font-weight: 400;
}

/* Legal - Legal text */
.legal-text {
    font-size: 11px;
    line-height: 13px;
    font-weight: 400;
}

/* ============================================
   COLOR SYSTEM
   Based on Dacia Digital Standard Guide
   ============================================ */

:root {
    /* ============================================
       MAIN COLOURS
       ============================================ */
    --dacia-khaki: #646b52; /* Primary brand color - Dacia Khaki */
    --dacia-khaki-hover: #4e5844; /* Dark green hover */
    --dacia-white: #FFFFFF;
    --dacia-black: #000000;
    
    /* ============================================
       SECONDARY COLOURS
       ============================================ */
    --dacia-dark-green: #4e5844; /* Dark Green */
    --dacia-terra-cota: #b9412d; /* Terra Cota */
    --dacia-orange: #ec6528; /* Orange */
    --dacia-sand: #d6d2c4; /* Sand */
    --dacia-bright-green: #b3cc23; /* Bright Green */
    
    /* Grey Scale */
    --dacia-light-grey: #D9D9D6; /* Light grey */
    --dacia-mid-grey: #BBBCBC; /* Mid grey */
    --dacia-dark-grey: #888B8D; /* Dark grey */
    
    /* ============================================
       TEXT COLOURS
       ============================================ */
    --text-primary: #646b52; /* Text primary - Dacia Khaki */
    --text-secondary: #333333; /* Text secondary */
    --text-tertiary: #777777; /* Text tertiary */
    --text-light-bg: #FFFFFF; /* Text light background */
    --text-light-background: #FFFFFF; /* Text light background */
    
    /* ============================================
       OVERLAY COLOURS
       ============================================ */
    --overlay-base: #FFFFFF; /* Overlay base */
    --overlay-dark-30: rgba(0, 0, 0, 0.3); /* Overlay dark (alpha 30%) */
    --overlay-dark-70: rgba(0, 0, 0, 0.7); /* Overlay dark (alpha 70%) */
    --overlay-dark-80: rgba(0, 0, 0, 0.8); /* Overlay dark (alpha 80%) */
    
    /* ============================================
       NOTIFICATION COLOURS
       ============================================ */
    --alert-base: #E91630; /* Alert base */
    --alert-neutral: #EE5352; /* Alert neutral */
    --warning-base: #F7A84B; /* Warning base */
    --success-light: #50DD6D; /* Success light */
    --success-base: #40D37C; /* Success base */
    --information-base: #ec6528; /* Information base - Dacia Orange */
    
    /* ============================================
       DISABLED STATES
       ============================================ */
    --disabled-bg: #F2F2F2;
    --disabled-text: #CCCCCC; /* Disable button color */
}

/* Apply colors */
body {
    color: var(--text-primary);
    background-color: var(--dacia-white);
}

/* ============================================
   LOGO POSITIONS & SIZES
   ============================================ */

/* Dacia Emblem - Left side of navigation */
.dacia-emblem,
.dacia-emblem {
    display: block;
    width: 50px; /* Default, can be overridden */
    height: 40px; /* Default, can be overridden */
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
}

/* Dacia Logotype - Minimum size 120px width */
.dacia-logotype {
    display: block;
    min-width: 120px; /* Minimum size per guidelines */
    height: auto;
    object-fit: contain;
}

/* Dealer Logo - Right side of navigation */
.dealer-logo {
    display: block;
    width: 83px; /* Default, can be overridden */
    height: 83px; /* Default, can be overridden */
    object-fit: contain;
}