/* ═══════════════════════════════════════════════════════════
   LES RITUELS DE LÉA - DESIGN TOKENS

   Source unique pour les variables CSS du thème.
   Préfixe --rl-* pour l'identité Rituels de Léa.
   Alias --nf-* conservés pour rétrocompatibilité.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ══════════════════════════════════════════════════════════
       COULEURS PRINCIPALES
       ══════════════════════════════════════════════════════════ */

    /* Marron principal (identité de marque) */
    --rl-brown: #8B5E3C;
    --rl-brown-dark: #6d4a2f;
    --rl-brown-light: #a67c52;

    /* Accent berry (pour gradients et accents) */
    --rl-berry: #9C4A4A;

    /* Gradient signature */
    --rl-gradient: linear-gradient(135deg, var(--rl-brown), var(--rl-berry));

    /* ══════════════════════════════════════════════════════════
       TEXTE
       ══════════════════════════════════════════════════════════ */

    --rl-ink: #2A1C14;
    --rl-ink-soft: rgba(42, 28, 20, 0.76);
    --rl-ink-muted: rgba(42, 28, 20, 0.55);
    --rl-ink-faint: rgba(42, 28, 20, 0.35);

    /* ══════════════════════════════════════════════════════════
       BACKGROUNDS
       ══════════════════════════════════════════════════════════ */

    --rl-bg-white: #ffffff;
    --rl-bg-cream: #f9f6f2;
    --rl-bg-warm: #f6efe8;
    --rl-bg-blush: #f2e7df;
    --rl-bg-card: rgba(255, 255, 255, 0.72);
    --rl-bg-dark: #2A1C14;

    /* ══════════════════════════════════════════════════════════
       BORDURES
       ══════════════════════════════════════════════════════════ */

    --rl-stroke: rgba(139, 94, 60, 0.16);
    --rl-stroke-light: rgba(139, 94, 60, 0.10);
    --rl-stroke-medium: rgba(139, 94, 60, 0.22);
    --rl-stroke-white: rgba(255, 255, 255, 0.18);
    --rl-border: #e8e2da;
    --rl-border-hover: #d4ccc0;

    /* ══════════════════════════════════════════════════════════
       OMBRES (système cohérent)
       ══════════════════════════════════════════════════════════ */

    --rl-shadow-xs: 0 2px 4px rgba(42, 28, 20, 0.04);
    --rl-shadow-sm: 0 4px 12px rgba(42, 28, 20, 0.06);
    --rl-shadow-md: 0 10px 26px rgba(42, 28, 20, 0.10);
    --rl-shadow-lg: 0 22px 70px rgba(42, 28, 20, 0.12);
    --rl-shadow-xl: 0 26px 90px rgba(42, 28, 20, 0.14);
    --rl-shadow-glow: 0 18px 44px rgba(139, 94, 60, 0.30);
    --rl-shadow-glow-sm: 0 4px 12px rgba(139, 94, 60, 0.20);

    /* ══════════════════════════════════════════════════════════
       RAYONS
       ══════════════════════════════════════════════════════════ */

    --rl-radius-xs: 6px;
    --rl-radius-sm: 12px;
    --rl-radius-md: 18px;
    --rl-radius-lg: 28px;
    --rl-radius-xl: 32px;
    --rl-radius-full: 999px;

    /* ══════════════════════════════════════════════════════════
       TRANSITIONS
       ══════════════════════════════════════════════════════════ */

    --rl-ease: cubic-bezier(0.2, 0.85, 0.2, 1);
    --rl-transition-fast: 0.15s ease;
    --rl-transition-medium: 0.18s ease;
    --rl-transition-slow: 0.55s var(--rl-ease);

    /* ══════════════════════════════════════════════════════════
       TYPOGRAPHIE
       ══════════════════════════════════════════════════════════ */

    --rl-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --rl-font-serif: "Playfair Display", Georgia, serif;

    /* ══════════════════════════════════════════════════════════
       ÉTATS
       ══════════════════════════════════════════════════════════ */

    --rl-success: #5a9c5a;
    --rl-error: #c45c5c;
    --rl-warning: #c4a05c;

    /* ══════════════════════════════════════════════════════════
       ALIAS RÉTROCOMPATIBLES (--nf-*)
       Pour les anciens fichiers CSS (huel-style, product-page-ux, etc.)
       ══════════════════════════════════════════════════════════ */

    --nf-primary: var(--rl-brown-light);
    --nf-primary-hover: var(--rl-brown);
    --nf-primary-light: var(--rl-bg-warm);

    --nf-text-dark: var(--rl-ink);
    --nf-text-medium: #5a5550;
    --nf-text-light: #8a847c;

    --nf-border: var(--rl-border);
    --nf-border-hover: var(--rl-border-hover);

    --nf-background: var(--rl-bg-cream);
    --nf-bg-light: var(--rl-bg-cream);
    --nf-bg-dark: var(--rl-bg-dark);

    --nf-radius: var(--rl-radius-sm);
    --nf-transition: var(--rl-transition-fast);

    --nf-error: var(--rl-error);
}