/* Polices — Space Grotesk (display/chiffres), IBM Plex Sans (UI), IBM Plex Mono (timer). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Variables de design — source : _specs/oridesk_prototype.html (§10). */
:root {
    --petrol-900: #0c2b35;
    --petrol-800: #103743;
    --petrol-700: #14505f;
    --petrol-600: #1a6576;
    --petrol-500: #1f7a8c;
    --petrol-100: #dceaed;
    --canvas: #f4f7f8;
    --surface: #ffffff;
    --surface-2: #fbfcfd;
    --ink: #0e2027;
    --muted: #5c7079;
    --faint: #90a2a9;
    --line: #e3eaec;
    --ok: #2e9e6b;
    --ok-bg: #e6f3ec;
    --warn: #dca036;
    --warn-bg: #fbf2dd;
    --over: #cf564e;
    --over-bg: #fae6e4;
    --info-bg: #e8f0f4;
    --shadow: 0 1px 2px rgba(12, 43, 53, 0.04), 0 4px 16px rgba(12, 43, 53, 0.06);
}

@layer base {
    body {
        @apply bg-canvas text-ink font-sans;
        font-size: 14px;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3, h4 {
        @apply font-display font-semibold;
        letter-spacing: -0.01em;
    }
    /* Focus clavier visible (exigence a11y §10.4). */
    :focus-visible {
        outline: 2px solid var(--petrol-500);
        outline-offset: 2px;
        border-radius: 4px;
    }
    /* Respect de prefers-reduced-motion (§10.4). */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.001ms !important;
            transition-duration: 0.001ms !important;
        }
    }
}

@layer components {
    /* Chiffres tabulaires pour montants/durées. */
    .num {
        @apply font-display;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
    }
    .money {
        @apply font-display font-semibold;
        font-variant-numeric: tabular-nums;
    }
}