/* Variables, reset, typographie et styles de base */

/* Custom font - Neuropol X */
@font-face {
    font-family: 'Neuropol X';
    src: url('../assets/fonts/Neuropol_X_rg.woff2') format('woff2'),
         url('../assets/fonts/Neuropol_X_rg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Custom font - TR-909 */
@font-face {
    font-family: 'TR-909';
    src: url('../assets/fonts/TR-909.woff2') format('woff2'),
         url('../assets/fonts/TR-909.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ========== VARIABLES ET RESET ========== */
:root {
    /* Theme Colors */
    --theme-primary: #74FF95;       /* Accent principal (vert) */
    --theme-secondary: #DEE2E6;     /* Couleur secondaire (gris clair) */
    --theme-tertiary: #6C757D;      /* Couleur tertiaire (gris foncé) */
    --theme-warning: #eb9c26;       /* Couleur d'avertissement (orange) */
    --theme-error: #FF4D4D;         /* Couleur d'erreur (rouge) */
    --theme-success: #74FF95;       /* Couleur de succès (vert) */

    /* Message Colors */
    --message-info: #87CEEB;        /* Info (bleu ciel) */
    --message-alert: #FFB84D;       /* Alertes (orange) */
    --message-system: #4B6EFF;      /* Messages système (bleu) */
    --message-anomaly: #FF69B4;     /* Anomalies (rose) */

    /* UNIX Terminal Colors */
    --terminal-user: #44DD44;       /* Couleur utilisateur du terminal */
    --terminal-path: #5151F3;       /* Couleur du chemin du terminal */
    --terminal-directory: #5151F3;  /* Couleur du répertoire du terminal */

    /* Background Colors */
    --bg-main: rgba(0, 13, 26, 0.45);
    --bg-terminal: rgba(0, 13, 26, 0.45);
    --bg-modal: rgba(0, 13, 26, 0.95);
    --bg-blur: rgba(0, 13, 26, 0.7);

    /* Text Colors */
    --text-primary: #DEE2E6;
    --text-muted: rgba(222, 226, 230, 0.7);
    --text-highlight: #74FF95;

    /* UI Elements */
    --window-header-bg: #DEE2E6;
    --window-header-text: #22252F;
    --window-border: #DEE2E6;
    --scrollbar-color: #858585;
    --button-bg: rgba(222, 226, 230, 0.1);
    --button-border: #74FF95;
    --button-hover-bg: rgba(116, 255, 149, 0.2);

    /* Effects */
    --glow-primary: 0 0 10px rgba(77, 238, 234, 0.5);
    --glow-secondary: 0 0 10px rgba(116, 255, 149, 0.1);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-xmd: 0.8rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Font */
    /* Taille de base ajustee pour Neuropol X */
    --font-size-base: clamp(14px, 0.9vw, 18px);

    /* Hierarchie typographique ajustee pour Neuropol X (reduction ~12-15%) */
    --font-size-xxl: clamp(1.55rem, 2.6vw, 2.6rem);       /* Tres tres grand texte */
    --font-size-xl: clamp(1.3rem, 2.2vw, 2.2rem);         /* Tres grand texte */
    --font-size-lg: clamp(1.05rem, 1.55vw, 1.55rem);      /* Grand texte */
    --font-size-xmd: clamp(0.95rem, 1.4vw, 1.4rem);       /* Texte moyen-grand */
    --font-size-md: clamp(0.88rem, 1.2vw, 1.2rem);        /* Texte moyen */
    --font-size-xsm: clamp(0.78rem, 1.05vw, 1.05rem);     /* Texte petit-moyen */
    --font-size-sm: clamp(0.74rem, 0.95vw, 0.95rem);      /* Petit texte */
    --font-size-xs: clamp(0.58rem, 0.7vw, 0.72rem);       /* Tres petit texte */
    --font-size-xxs: clamp(0.52rem, 0.6vw, 0.64rem);      /* Minuscule texte */

    /* Applications specifiques */
    --font-size-header: var(--font-size-sm);              /* Header principal (liens + date) */
    --font-size-window-header: var(--font-size-xsm);      /* En-tetes des fenetres (reduit) */
    --font-size-subheader: var(--font-size-sm);           /* Pour archive-counter, relay-status, etc. */
    --font-size-section-title: var(--font-size-md);       /* Titres de section */
    --font-size-text: var(--font-size-sm);                /* Texte standard */
    --font-size-playlistcontent: var(--font-size-xs);     /* contenu playlist */
    --font-size-button: var(--font-size-sm);              /* Texte des boutons */
    --font-size-quality-btn: var(--font-size-xxs);       /* Boutons de qualite audio */
    --font-size-station-name: var(--font-size-lg);       /* Nom de la station */
    --font-size-terminal: var(--font-size-xsm);            /* Terminal */
    --font-size-footer: var(--font-size-xs);              /* Footer */
    --font-size-status: var(--font-size-xs);              /* Textes de statut */
    
    /* Line-height */
    --line-height-header: 1.2;
    --line-height-text: 1.5;
    --line-height-terminal: 1.4;
    --line-height-tight: 1.1;

    /* Breakpoints */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    /* Tailles d'éléments */
    --icon-size-xs: 0.75rem;    /* 12px */
    --icon-size-sm: 1rem;       /* 16px */
    --icon-size-md: 1.5rem;     /* 24px */
    --icon-size-lg: 2rem;       /* 32px */

    /* Hauteurs de ligne */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.8;

    /* Rayons de bordure */
    --radius-sm: 0.25rem;       /* 4px */
    --radius-md: 0.5rem;        /* 8px */
    --radius-lg: 1rem;          /* 16px */
    --radius-pill: 9999px;

    /* Épaisseurs de bordure */
    --border-thin: 0.0625rem;       /* 1px */
    --border-regular: 0.125rem;     /* 2px */
    --border-thick: 0.1875rem;      /* 3px */

    /* Effets de transition */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Tailles d'éléments d'interface */
    --control-size-sm: 2rem;        /* 32px */
    --control-size-md: 2.5rem;      /* 40px */
    --control-size-lg: 3rem;        /* 48px */

    /* Dimensions des composants */
    --header-height: 3.125rem;      /* 50px */
    --footer-height: 2.5rem;        /* 40px */
    --sidebar-width: 16rem;         /* 256px */

    /* Glassmorphism Effects */
    --glass-blur: 10px;                              /* Blur intensity for glass effect */
    --glass-bg: rgba(0, 13, 26, 0.45);              /* Glass background with transparency */
    --glass-border: rgba(222, 226, 230, 0.3);       /* Semi-transparent glass border */
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Glass depth shadow */
}

/* Reset de base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Neuropol X', sans-serif;
}

html {
    font-size: 16px;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

body {
    background-color: #000D1A;
    background-image: url('../assets/images/backgrounds/background_1.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: var(--line-height-normal);
    min-height: 100vh;
    transition: background-image var(--transition-normal);
    font-size: 1rem;
}

/* Éléments de base */
a {
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-normal);
}

/* Link hover - desktop only with precise pointer */
@media (hover: hover) and (pointer: fine) {
    a:hover {
        color: var(--theme-primary);
    }
}
 
/* Touch feedback for mobile */
a:active {
    opacity: 0.8;
    transition: opacity 0.1s ease;
}

img {
    max-width: 100%;
    height: auto;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Neuropol X', sans-serif;
}

iframe {
    border: 0;
    width: 100%;
}