/* =============================================================================
   Keepnew — design tokens
   Direction artistique 2026 : vintage, classique, luxe (le majordome).
   Navy / crème / rose poudré / bleu royal. Un seul accent d'action : le royal.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&family=Jost:ital,wght@0,300..700;1,400&family=Great+Vibes&display=swap');

:root {
    /* Couleur */
    --kn-accent: #4A63E7;       /* bleu royal — action primaire, sélection, focus */
    --kn-accent-ink: #2F40A3;   /* texte accentué sur fond clair, hover — contraste >= 4.5:1 vérifié sur blush */
    --kn-royal-soft: #E5E9FB;   /* fond doux royal (badges "atelier") */
    --kn-blush: #EFC6CB;        /* rose poudré — surface et badges UNIQUEMENT, jamais sous du texte */
    --kn-navy: #24355C;         /* navy signature — fonds inversés, surfaces cérémonielles */
    --kn-navy-deep: #1B2A4A;    /* navy profond — hover sur fond inversé */
    --kn-ink: #1B2A4A;          /* texte principal (navy, jamais de noir pur) */
    --kn-muted: #5C6479;        /* texte secondaire, contraste >= 4.5:1 vérifié */
    --kn-paper: #F7F4EC;        /* fond de page — crème, jamais blanc pur */
    --kn-paper-raised: #FDFCF8; /* fond légèrement relevé sur crème */
    --kn-surface: #FFFFFF;      /* cartes */
    --kn-line: #E4DECF;         /* filets 1 px, hairline crème */
    --kn-line-strong: #C9C2AF;  /* filets renforcés */

    /* Statuts — feutrés, classiques */
    --kn-success: #2F6640;
    --kn-success-bg: #E4EFE7;
    --kn-success-border: #BFDAC7;
    --kn-warning: #8A631A;
    --kn-warning-bg: #F6EDD8;
    --kn-warning-border: #E6D2A0;
    --kn-alert: #A23830;
    --kn-alert-bg: #F7E4E2;
    --kn-alert-border: #E8BEB9;

    /* Typographie — display didone, UI géométrique vintage, script en accent rare */
    --kn-font-body: "Jost", "Century Gothic", Futura, system-ui, sans-serif;
    --kn-font-display: "Bodoni Moda", Didot, "Bodoni MT", serif;
    --kn-font-script: "Great Vibes", cursive;

    /* Échelle : corps >= 16, jamais < 14 */
    --kn-fs-1: 2.25rem;     /* 36 */
    --kn-fs-2: 1.5rem;      /* 24 */
    --kn-fs-3: 1.375rem;    /* 22 */
    --kn-fs-body: 1rem;     /* 16 */
    --kn-fs-small: 0.875rem; /* 14 */
    --kn-lh-body: 1.55;

    /* Espacement — grille de 4 px */
    --kn-space-1: 4px;
    --kn-space-2: 8px;
    --kn-space-3: 12px;
    --kn-space-4: 16px;
    --kn-space-5: 24px;
    --kn-space-6: 32px;

    /* Rayons — quasi carrés, classiques. Pilule réservée aux badges/tags. */
    --kn-radius-control: 4px;
    --kn-radius-card: 6px;
    --kn-radius-pill: 999px;

    /* Ombres — douces, teintées navy */
    --kn-shadow-card: 0 1px 2px rgba(27, 42, 74, .06), 0 8px 24px rgba(27, 42, 74, .08);
    --kn-shadow-raised: 0 2px 6px rgba(27, 42, 74, .10), 0 16px 40px rgba(27, 42, 74, .14);

    /* Cibles tactiles */
    --kn-touch: 48px;
}

/* Mode sombre optionnel — navy comme fond, mêmes principes */
@media (prefers-color-scheme: dark) {
    :root {
        --kn-ink: #F2EFE6;
        --kn-muted: #A9B0C6;
        --kn-paper: #1B2A4A;
        --kn-paper-raised: #24355C;
        --kn-surface: #24355C;
        --kn-line: rgba(247, 244, 236, .16);
        --kn-line-strong: rgba(247, 244, 236, .28);
        --kn-accent: #7E90F6;
        --kn-accent-ink: #A9B6F9;
    }
}

/* Respecte la préférence de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}