@import "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap";

:root {
    --font: 'Roboto';
}
:root,
body.light {
    --primary:#006e1c;
    --on-primary:#ffffff;
    --primary-container:#94f990;
    --on-primary-container:#002204;
    --secondary:#52634f;
    --on-secondary:#ffffff;
    --secondary-container:#d5e8cf;
    --on-secondary-container:#111f0f;
    --tertiary:#38656a;
    --on-tertiary:#ffffff;
    --tertiary-container:#bcebf0;
    --on-tertiary-container:#002023;
    --error:#ba1a1a;
    --on-error:#ffffff;
    --error-container:#ffdad6;
    --on-error-container:#410002;
    --background:#fcfdf6;
    --on-background:#1a1c19;
    --surface:#f9faf4;
    --on-surface:#1a1c19;
    --surface-variant:#dee5d8;
    --on-surface-variant:#424940;
    --outline:#72796f;
    --outline-variant:#c2c9bd;
    --shadow:#000000;
    --scrim:#000000;
    --inverse-surface:#2f312d;
    --inverse-on-surface:#f0f1eb;
    --inverse-primary:#78dc77;
    --surface-dim:#dadad4;
    --surface-bright:#f9faf4;
    --surface-container-lowest:#ffffff;
    --surface-container-low:#f3f4ee;
    --surface-container:#eeeee8;
    --surface-container-high:#e8e9e2;
    --surface-container-highest:#e2e3dd;
    
    /* Gradients personnalisés */
    --gradient: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%);
    /* --hero-gradient: linear-gradient(135deg, var(--surface) 0%, var(--primary-container) 100%); */
    --hero-gradient: linear-gradient(135deg, #f8fffe 0%, #f0f7f4 100%);
}

body.dark {
    --primary:#78dc77;
    --on-primary:#00390a;
    --primary-container:#005313;
    --on-primary-container:#94f990;
    --secondary:#baccb3;
    --on-secondary:#253423;
    --secondary-container:#3b4b38;
    --on-secondary-container:#d5e8cf;
    --tertiary:#a0cfd4;
    --on-tertiary:#00363b;
    --tertiary-container:#1f4d52;
    --on-tertiary-container:#bcebf0;
    --error:#ffb4ab;
    --on-error:#690005;
    --error-container:#93000a;
    --on-error-container:#ffb4ab;
    --background:#1a1c19;
    --on-background:#e2e3dd;
    --surface:#121411;
    --on-surface:#e2e3dd;
    --surface-variant:#424940;
    --on-surface-variant:#c2c9bd;
    --outline:#8c9388;
    --outline-variant:#424940;
    --shadow:#000000;
    --scrim:#000000;
    --inverse-surface:#e2e3dd;
    --inverse-on-surface:#2f312d;
    --inverse-primary:#006e1c;
    --surface-dim:#121411;
    --surface-bright:#383a36;
    --surface-container-lowest:#0c0f0c;
    --surface-container-low:#1a1c19;
    --surface-container:#1e201d;
    --surface-container-high:#282b27;
    --surface-container-highest:#333531;
   
    /* Gradients personnalisés pour le mode sombre */
   --gradient: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%);
   /* --hero-gradient: linear-gradient(135deg, var(--surface) 0%, var(--surface-container-high) 100%); */
    --hero-gradient: linear-gradient(135deg, #1a1c19 0%, #282b27 100%);
}