/* =========================================================
   Océane — Design System
   Thème spatial sombre avec accents néon
   ========================================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== CSS Custom Properties ===== */
:root {
    /* --- Couleurs principales --- */
    --color-bg-deep:        #02040a;
    --color-bg-primary:     #050a14;
    --color-bg-secondary:   #091224;
    --color-bg-tertiary:    #0c1830;
    --color-bg-card:        rgba(5, 10, 20, 0.7);
    --color-bg-card-hover:  rgba(10, 20, 40, 0.85);
    --color-bg-glass:       rgba(5, 10, 20, 0.5);
    --color-bg-input:       rgba(2, 4, 10, 0.9);

    /* --- Accents --- */
    --color-accent-cyan:    #00e5ff;
    --color-accent-purple:  #b47cff;
    --color-accent-amber:   #ffb300;
    --color-accent-red:     #ff3d5a;
    --color-accent-green:   #00e676;
    --color-accent-pink:    #ff4081;
    --color-accent-blue:    #448aff;
    --color-success:        var(--color-accent-green);
    --color-error:          var(--color-accent-red);

    /* --- Texte --- */
    --color-text-primary:   #e8ecf4;
    --color-text-secondary: #8b99b8;
    --color-text-muted:     #5a6a8a;
    --color-text-bright:    #ffffff;
    --color-text-accent:    var(--color-accent-cyan);

    /* --- Bordures --- */
    --color-border:         rgba(0, 229, 255, 0.2);
    --color-border-active:  rgba(0, 229, 255, 0.6);
    --color-border-glow:    rgba(0, 229, 255, 0.4);

    /* --- Gradients --- */
    --gradient-primary:     linear-gradient(135deg, #050a14 0%, #091224 100%);
    --gradient-card:        linear-gradient(145deg, rgba(5, 10, 20, 0.8) 0%, rgba(2, 4, 10, 0.9) 100%);
    --gradient-accent:      linear-gradient(135deg, var(--color-accent-cyan) 0%, var(--color-accent-purple) 100%);
    --gradient-amber:       linear-gradient(135deg, var(--color-accent-amber) 0%, #ff8f00 100%);
    --gradient-sidebar:     linear-gradient(180deg, #050a14 0%, #02040a 100%);

    /* --- Ombres --- */
    --shadow-sm:            0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md:            0 4px 8px rgba(0, 0, 0, 0.6);
    --shadow-lg:            0 8px 16px rgba(0, 0, 0, 0.7);
    --shadow-glow-cyan:     0 0 10px rgba(0, 229, 255, 0.3), 0 0 20px rgba(0, 229, 255, 0.1);
    --shadow-glow-purple:   0 0 10px rgba(180, 124, 255, 0.3), 0 0 20px rgba(180, 124, 255, 0.1);
    --shadow-glow-amber:    0 0 10px rgba(255, 179, 0, 0.3), 0 0 20px rgba(255, 179, 0, 0.1);

    /* --- Typographie --- */
    --font-primary:         'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:            'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:              0.75rem;    /* 12px */
    --text-sm:              0.875rem;   /* 14px */
    --text-base:            1rem;       /* 16px */
    --text-lg:              1.125rem;   /* 18px */
    --text-xl:              1.25rem;    /* 20px */
    --text-2xl:             1.5rem;     /* 24px */
    --text-3xl:             1.875rem;   /* 30px */
    --text-4xl:             2.25rem;    /* 36px */
    --text-5xl:             3rem;       /* 48px */

    --weight-light:         300;
    --weight-normal:        400;
    --weight-medium:        500;
    --weight-semibold:      600;
    --weight-bold:          700;
    --weight-extrabold:     800;

    /* --- Espacement --- */
    --space-1:              0.25rem;    /* 4px */
    --space-2:              0.5rem;     /* 8px */
    --space-3:              0.75rem;    /* 12px */
    --space-4:              1rem;       /* 16px */
    --space-5:              1.25rem;    /* 20px */
    --space-6:              1.5rem;     /* 24px */
    --space-8:              2rem;       /* 32px */
    --space-10:             2.5rem;     /* 40px */
    --space-12:             3rem;       /* 48px */
    --space-16:             4rem;       /* 64px */

    /* --- Rayons de bordure --- */
    --radius-sm:            0px;
    --radius-md:            2px;
    --radius-lg:            2px;
    --radius-xl:            4px;
    --radius-full:          9999px;

    /* --- Transitions --- */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
    --transition-slow:      400ms ease;
    --transition-spring:    500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Z-index --- */
    --z-base:               1;
    --z-dropdown:           100;
    --z-sticky:             200;
    --z-modal-backdrop:     300;
    --z-modal:              400;
    --z-toast:              500;
    --z-tooltip:            600;

    /* --- Layout --- */
    --sidebar-width:        260px;
    --sidebar-collapsed:    72px;
    --header-height:        60px;
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--weight-normal);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-deep);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 255, 0.3);
}

/* ===== Sélection ===== */
::selection {
    background: rgba(0, 229, 255, 0.3);
    color: var(--color-text-bright);
}

/* ===== Links ===== */
a {
    color: var(--color-accent-cyan);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-accent-purple);
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    color: var(--color-text-bright);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* ===== Code ===== */
code, pre {
    font-family: var(--font-mono);
}

/* ===== Utility Classes ===== */
.text-accent    { color: var(--color-accent-cyan); }
.text-purple    { color: var(--color-accent-purple); }
.text-amber     { color: var(--color-accent-amber); }
.text-red       { color: var(--color-accent-red); }
.text-green     { color: var(--color-accent-green); }
.text-muted     { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }

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

.font-mono      { font-family: var(--font-mono); }
.font-light     { font-weight: var(--weight-light); }
.font-medium    { font-weight: var(--weight-medium); }
.font-semibold  { font-weight: var(--weight-semibold); }
.font-bold      { font-weight: var(--weight-bold); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.ml-auto { margin-left: auto; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.hidden { display: none !important; }

/* ===== Animations ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(0, 229, 255, 0.2); }
    50%      { box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes rotateIn {
    from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
    to   { opacity: 1; transform: rotate(0) scale(1); }
}

.animate-fade-in    { animation: fadeIn 0.4s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-slide-in   { animation: slideInLeft 0.3s ease-out forwards; }
.animate-pulse      { animation: pulse 2s ease-in-out infinite; }
.animate-glow       { animation: glow 3s ease-in-out infinite; }
.animate-float      { animation: float 4s ease-in-out infinite; }

/* Stagger animation delays */
.stagger-1 { animation-delay: 0.05s; opacity: 0; }
.stagger-2 { animation-delay: 0.1s;  opacity: 0; }
.stagger-3 { animation-delay: 0.15s; opacity: 0; }
.stagger-4 { animation-delay: 0.2s;  opacity: 0; }
.stagger-5 { animation-delay: 0.25s; opacity: 0; }
.stagger-6 { animation-delay: 0.3s;  opacity: 0; }