/* ── Reset & variables ─────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

:root {
    /* Couleurs */
    --color-bg:          #0f0f0f;
    --color-surface:     #1a1a1a;
    --color-surface-2:   #252525;
    --color-border:      #2e2e2e;
    --color-text:        #f0f0f0;
    --color-text-muted:  #888;
    --color-text-dim:    #555;
    --color-primary:     #e8ff57;   /* jaune-vert — couleur d'action principale */
    --color-primary-fg:  #0f0f0f;   /* texte sur fond primary */
    --color-danger:      #ff4d4d;
    --color-success:     #4dff88;
    --color-warning:     #ffb84d;
    --color-pr:          #ffd700;   /* gold pour les PRs */

    /* Typographie */
    --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:  'SF Mono', 'Fira Code', Consolas, monospace;

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   2rem;

    --font-normal:  400;
    --font-medium:  500;
    --font-semi:    600;
    --font-bold:    700;

    /* Espacement */
    --space-1:    0.25rem;
    --space-2:    0.5rem;
    --space-3:    0.75rem;
    --space-4:    1rem;
    --space-5:    1.25rem;
    --space-6:    1.5rem;
    --space-8:    2rem;
    --space-10:   2.5rem;
    --space-12:   3rem;

    /* Rayons */
    --radius-sm:  0.375rem;
    --radius-md:  0.625rem;
    --radius-lg:  1rem;
    --radius-xl:  1.5rem;
    --radius-full: 9999px;

    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.5);

    /* Transitions */
    --transition-fast:   120ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   350ms ease;

    /* Nav bottom */
    --nav-height:   4rem;
    --safe-bottom:  env(safe-area-inset-bottom, 0px);
}

/* ── Base ──────────────────────────────────────────────────────────────── */

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.5;
    min-height: 100dvh;
    overscroll-behavior: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
    appearance: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ── Utilitaires de base ────────────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

.text-muted  { color: var(--color-text-muted); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-pr      { color: var(--color-pr); }
.text-sm      { font-size: var(--text-sm); }
.font-bold    { font-weight: var(--font-bold); }
.font-semi    { font-weight: var(--font-semi); }