/* ==========================================================================
   QR Informatique - Design tokens
   Variables centrales : couleurs, typographie, espacements, rayons, ombres.
   ========================================================================== */

:root {
    /* Couleurs de marque */
    --brand: #2563eb;
    --brand-600: #1d4ed8;
    --brand-700: #1e40af;
    --cyan: #06b6d4;
    --cyan-600: #0891b2;
    --brand-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(6, 182, 212, 0.12) 100%);

    /* Encre / fonds sombres */
    --ink: #0b1220;
    --ink-2: #0f172a;
    --ink-3: #111c33;

    /* Gris ardoise */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --white: #ffffff;

    /* Sémantique */
    --text: #0f172a;
    --text-soft: #475569;
    --text-muted: #64748b;
    --bg: #ffffff;
    --bg-alt: #f8fafc;
    --border: #e6eaf1;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --star: #fbbf24;

    /* Accent senior (chaud, accessible) */
    --senior: #ea580c;
    --senior-600: #c2410c;
    --senior-700: #9a3412;
    --senior-soft: #fff7ed;

    /* Typographie */
    --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Rayons */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Ombres */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
    --shadow-lg: 0 24px 50px -20px rgba(15, 23, 42, 0.28);
    --shadow-brand: 0 16px 40px -16px rgba(37, 99, 235, 0.55);

    /* Espacements (section rhythm) */
    --space-section: clamp(4rem, 8vw, 7rem);
    --container: 1180px;
    --container-narrow: 820px;

    /* Transitions */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 0.18s var(--ease);
    --t: 0.3s var(--ease);
    --t-slow: 0.55s var(--ease);

    /* Header */
    --header-h: 76px;
}
