/*
 * FRA142 Motors - Palette "Deep Ocean"
 * Thème marin élégant & professionnel
 */

:root {
    /* Couleurs principales */
    --fra-abysses: #0a1628;     /* Footer, dark sections */
    --fra-marine: #1e3a6e;      /* Logo, titres, texte principal */
    --fra-ocean: #2d5a9e;       /* CTAs, liens, accents */
    --fra-vague: #6b9fd4;       /* Hovers, highlights, secondary */
    --fra-ecume: #e8f1f8;       /* Backgrounds clairs, cards */
    --fra-blanc: #ffffff;       /* Fond principal */

    /* Variantes utiles */
    --fra-marine-light: #2a4a82;
    --fra-marine-dark: #152a52;
    --fra-ocean-dark: #1e4a88;
    --fra-ocean-light: #3d6ab0;

    /* Texte */
    --text-primary: var(--fra-marine);
    --text-secondary: var(--fra-ocean);
    --text-muted: #8a9fb8;
    --text-on-dark: var(--fra-blanc);
    --text-on-accent: var(--fra-blanc);

    /* Backgrounds */
    --bg-primary: var(--fra-blanc);
    --bg-secondary: var(--fra-ecume);
    --bg-dark: var(--fra-abysses);
    --bg-accent: var(--fra-ocean);

    /* Borders & Shadows */
    --border-light: #dce8f4;
    --border-medium: #b8d0e8;
    --shadow-sm: 0 2px 8px rgba(10, 22, 40, 0.08);
    --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.12);
    --shadow-lg: 0 8px 32px rgba(10, 22, 40, 0.16);

    /* Gradients */
    --gradient-ocean: linear-gradient(135deg, var(--fra-abysses) 0%, var(--fra-marine) 50%, var(--fra-ocean) 100%);
    --gradient-wave: linear-gradient(135deg, var(--fra-ocean) 0%, var(--fra-vague) 100%);
    --gradient-mist: linear-gradient(180deg, var(--fra-blanc) 0%, var(--fra-ecume) 100%);
    --gradient-deep: linear-gradient(180deg, var(--fra-marine) 0%, var(--fra-abysses) 100%);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;
}

/* Utility classes */
.bg-abysses { background-color: var(--fra-abysses); }
.bg-marine { background-color: var(--fra-marine); }
.bg-ocean { background-color: var(--fra-ocean); }
.bg-vague { background-color: var(--fra-vague); }
.bg-ecume { background-color: var(--fra-ecume); }
.bg-blanc { background-color: var(--fra-blanc); }

.text-abysses { color: var(--fra-abysses); }
.text-marine { color: var(--fra-marine); }
.text-ocean { color: var(--fra-ocean); }
.text-vague { color: var(--fra-vague); }
.text-blanc { color: var(--fra-blanc); }

.gradient-ocean { background: var(--gradient-ocean); }
.gradient-wave { background: var(--gradient-wave); }
.gradient-mist { background: var(--gradient-mist); }
.gradient-deep { background: var(--gradient-deep); }