/* =====================================================================
   WASATE CLOUD — Design tokens (palette chaleureuse)
   Blanc / blanc cassé / orange pastel / gris / marron clair
   Inspirations : Stripe, Linear sur fond clair, Notion warm theme
   ===================================================================== */

:root {
    /* ----- Palette principale : BLANC dominant, orange/marron secondaires */
    --color-bg:        #FFFFFF;   /* blanc pur principal */
    --color-bg-2:      #FAFAFA;   /* blanc cassé très léger */
    --color-surface:   #FFFFFF;   /* blanc pur pour les cartes */
    --color-surface-2: #F5F5F5;   /* gris très clair */
    --color-border:    #EAEAEA;   /* gris clair */
    --color-border-2:  #D4D4D4;   /* gris plus marqué */

    --color-text:      #111111;   /* noir doux pour le corps de texte */
    --color-text-mut:  #555555;   /* gris foncé pour secondaire */
    --color-text-dim:  #888888;   /* gris pour tertiaire */

    /* Accent : orange pastel chaleureux */
    --color-accent:        #E89568;   /* orange pastel principal */
    --color-accent-hover:  #D17F52;   /* orange un poil plus saturé au hover */
    --color-accent-light:  #F5C2A0;   /* orange pastel très clair */
    --color-accent-soft:   #FAE4D2;   /* orange crème très doux pour fonds */
    --color-accent-glow:   rgba(232, 149, 104, 0.25);

    /* Marron clair (texte chaleureux, headings, boutons secondaires) */
    --color-brown:       #8B6F47;   /* marron clair principal */
    --color-brown-light: #B4977B;   /* marron très clair */
    --color-brown-dark:  #5D4A30;   /* marron plus foncé pour contrastes */

    /* Gris (texte neutre, bordures) */
    --color-gray:        #8C8273;   /* gris chaud */
    --color-gray-light:  #C9C1B2;   /* gris clair */

    /* Sémantique (adoucies pour rester en cohérence) */
    --color-success: #6FA873;   /* vert sauge */
    --color-warning: #E0A45F;   /* ambre */
    --color-danger:  #C77373;   /* rose terracotta */
    --color-info:    #7B9DBE;   /* bleu doux */

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #E89568 0%, #D17F52 100%);
    --gradient-warm:    linear-gradient(135deg, #F5C2A0 0%, #E89568 100%);
    --gradient-bg:      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(232, 149, 104, 0.08) 0%, transparent 50%);
    --gradient-paper:   linear-gradient(180deg, #FFFDF9 0%, #FAF6EE 100%);

    /* ----- Typographie */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Fraunces', 'Playfair Display', Georgia, serif;   /* serif chaleureuse pour titres */
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --text-xs:   12px;
    --text-sm:   14px;
    --text-base: 16px;
    --text-lg:   18px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  32px;
    --text-4xl:  40px;
    --text-5xl:  56px;
    --text-6xl:  72px;

    --leading-tight:  1.2;
    --leading-snug:   1.4;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* ----- Espacements */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ----- Border radius (un peu plus arrondi pour ambiance chaleureuse) */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 9999px;

    /* ----- Shadows (très douces sur fond blanc) */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 16px 32px rgba(0, 0, 0, 0.10);
    --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 24px var(--color-accent-glow);
    --shadow-warm: 0 8px 24px rgba(232, 149, 104, 0.18);

    /* ----- Transitions */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ----- Z-index */
    --z-dropdown: 1000;
    --z-sticky:   1020;
    --z-modal:    1030;
    --z-toast:    1040;

    /* ----- Container */
    --container-max: 1200px;
    --container-narrow: 720px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mode sombre auto SUPPRIMÉ : la marque impose un fond BLANC en toutes
 * circonstances, peu importe la préférence OS de l'utilisateur.
 * Si l'utilisateur a son OS en mode sombre, on force quand même le rendu
 * clair via color-scheme: light + ne pas override les variables. */
:root {
    color-scheme: light;
}