/* ============================================================
   HEXIS DAM v2 — Design System
   Variables, reset, typographie, keyframes
   ============================================================ */

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

/* ── Custom Properties ──────────────────────────────────── */
:root {
    /* Brand */
    --brand-graphics:   #FE016C;
    --brand-energy:     #F5A623;
    --brand-training:   #4A90D9;
    --brand-corporate:  #232323;
    --brand-accent:     var(--brand-graphics);

    /* Surfaces — Light */
    --bg:               #F8F9FA;
    --bg-surface:       #FFFFFF;
    --bg-elevated:      #FFFFFF;
    --bg-hover:         #F1F3F5;
    --bg-input:         #F1F3F5;
    --bg-overlay:       rgba(0, 0, 0, 0.5);
    --bg-glass:         rgba(255, 255, 255, 0.72);

    /* Text */
    --text:             #1A1A2E;
    --text-secondary:   #495057;
    --text-muted:       #868E96;
    --text-light:       #ADB5BD;
    --text-inverse:     #FFFFFF;

    /* Borders */
    --border:           #E9ECEF;
    --border-light:     #F1F3F5;
    --border-focus:     var(--brand-accent);

    /* Shadows */
    --shadow-xs:        0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:        0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg:        0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-xl:        0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --shadow-card:      0 2px 8px rgba(0,0,0,0.06);
    --shadow-card-hover: 0 12px 28px rgba(0,0,0,0.12);

    /* Layout */
    --max-width:        1440px;
    --header-height:    64px;
    --sidebar-width:    260px;

    /* Radius */
    --radius-xs:        4px;
    --radius-sm:        8px;
    --radius-md:        12px;
    --radius-lg:        16px;
    --radius-xl:        24px;
    --radius-full:      9999px;

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

    /* Typography */
    --font-family:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:        'SF Mono', 'Fira Code', monospace;

    --text-xs:          0.75rem;
    --text-sm:          0.8125rem;
    --text-base:        0.9375rem;
    --text-lg:          1.125rem;
    --text-xl:          1.25rem;
    --text-2xl:         1.5rem;
    --text-3xl:         2rem;
    --text-4xl:         2.75rem;

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

    /* Transitions */
    --ease-fast:        150ms ease;
    --ease-base:        250ms ease;
    --ease-slow:        400ms ease;
    --ease-spring:      500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-bounce:      600ms cubic-bezier(0.68, -0.55, 0.27, 1.55);

    /* Z-index */
    --z-base:           1;
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-overlay:        300;
    --z-modal:          400;
    --z-toast:          500;
}

/* ── Dark Theme ─────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:               #0F1117;
    --bg-surface:       #1A1D27;
    --bg-elevated:      #222633;
    --bg-hover:         #2A2E3D;
    --bg-input:         #222633;
    --bg-overlay:       rgba(0, 0, 0, 0.7);
    --bg-glass:         rgba(15, 17, 23, 0.8);

    --text:             #E9ECEF;
    --text-secondary:   #CED4DA;
    --text-muted:       #868E96;
    --text-light:       #495057;

    --border:           #2A2E3D;
    --border-light:     #222633;

    --shadow-xs:        0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:        0 4px 6px rgba(0,0,0,0.3);
    --shadow-lg:        0 10px 15px rgba(0,0,0,0.3);
    --shadow-xl:        0 20px 25px rgba(0,0,0,0.4);
    --shadow-card:      0 2px 8px rgba(0,0,0,0.3);
    --shadow-card-hover: 0 12px 28px rgba(0,0,0,0.4);
}

/* ── Base ───────────────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    transition: background var(--ease-base), color var(--ease-base);
    overflow-x: hidden;
}

a {
    color: var(--brand-accent);
    text-decoration: none;
    transition: color var(--ease-fast);
}
a:hover { color: var(--text); }

img, video { max-width: 100%; height: auto; display: block; }

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    font-size: inherit;
    color: inherit;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: var(--text);
}

::selection {
    background: var(--brand-accent);
    color: white;
}

:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--text-light);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── Utilities ──────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}