/* ==========================================
   FONT DECLARATIONS (Self-hosted Inter)
   NOTE: Téléchargez les fonts depuis Google Fonts ou https://rsms.me/inter/
   ========================================== */

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

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

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--slate-900);
    background-color: #a8b8cc;
    line-height: var(--leading-normal);
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--slate-900);
}

h1 {
    font-size: var(--text-6xl);
    font-weight: var(--font-extrabold);
}

h2 {
    font-size: var(--text-5xl);
}

h3 {
    font-size: var(--text-4xl);
}

h4 {
    font-size: var(--text-3xl);
}

h5 {
    font-size: var(--text-2xl);
}

h6 {
    font-size: var(--text-xl);
}

p {
    line-height: var(--leading-relaxed);
    color: var(--slate-800);
}

/* Responsive Typography */
@media (max-width: 1024px) {
    h1 {
        font-size: var(--text-5xl);
    }

    h2 {
        font-size: var(--text-4xl);
    }

    h3 {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: var(--text-4xl);
    }

    h2 {
        font-size: var(--text-3xl);
    }

    h3 {
        font-size: var(--text-2xl);
    }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

@media (min-width: 640px) {
    .container {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }
}

/* Text Gradients */
.text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-gradient-orange {
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-gradient-admin {
    background: var(--gradient-admin);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-gradient-rt {
    background: var(--gradient-rt);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-gradient-coach {
    background: var(--gradient-coach);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Text Colors */
.text-white {
    color: var(--white);
}

.text-slate-900 {
    color: var(--slate-900);
}

.text-slate-700 {
    color: var(--slate-700);
}

.text-slate-600 {
    color: var(--slate-600);
}

.text-slate-500 {
    color: var(--slate-500);
}

.text-slate-400 {
    color: var(--slate-400);
}

/* Background Colors */
.bg-white {
    background-color: #e8eef5;
}

.bg-slate-50 {
    background-color: #96a8bf;
}

.bg-slate-100 {
    background-color: var(--slate-100);
}

.bg-slate-200 {
    background-color: var(--slate-200);
}

/* Text Sizes */
.text-6xl {
    font-size: var(--text-6xl);
}

.text-5xl {
    font-size: var(--text-5xl);
}

.text-4xl {
    font-size: var(--text-4xl);
}

.text-3xl {
    font-size: var(--text-3xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-base {
    font-size: var(--text-base);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-xs {
    font-size: var(--text-xs);
}

/* Font Weights */
.font-light {
    font-weight: var(--font-light);
}

.font-normal {
    font-weight: var(--font-normal);
}

.font-medium {
    font-weight: var(--font-medium);
}

.font-semibold {
    font-weight: var(--font-semibold);
}

.font-bold {
    font-weight: var(--font-bold);
}

.font-extrabold {
    font-weight: var(--font-extrabold);
}

.font-black {
    font-weight: var(--font-black);
}

/* Text Alignment */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* ==========================================
   FOCUS STATES (Accessibility)
   ========================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--blue-600);
    outline-offset: 2px;
    border-radius: var(--rounded-sm);
}

/* ==========================================
   SELECTION STYLES
   ========================================== */

::selection {
    background-color: var(--blue-600);
    color: var(--white);
}

::-moz-selection {
    background-color: var(--blue-600);
    color: var(--white);
}