:root{

    /* Colors */
    --white: #fff;
    --black: #000;

    --grey-111: #111;
    --grey-222: #222;
    --grey-333: #333;
    --grey-444: #444;
    --grey-555: #555;
    --grey-666: #666;
    --grey-777: #777;
    --grey-888: #888;
    --grey-999: #999;
    --white-aaa: #aaa;
    --white-bbb: #bbb;
    --white-ccc: #ccc;
    --white-ddd: #ddd;
    --white-eee: #eee;

    --orange: #fe6e00;
    --skyblue: #00aaff;

     /* Green scale (basada en --green: #00816c) */
    --green-50: #f2f8f7;
    --green-100: #e6f2f0;
    --green-200: #cce6e2;
    --green-300: #b3d9d3;
    --green-400: #99ccc4;
    --green-500: #80c0b6;
    --green-600: #66b3a7;
    --green-700: #4da798;
    --green-800: #339a89;
    --green-900: #1a8e7b;
    --green: #00816c;
    --green-a100: #007461;
    --green-a200: #006756;
    --green-a300: #005a4c;
    --green-a400: #004d41;
    --green-a500: #004136;
    --green-a600: #00342b;
    --green-a700: #002720;
    --green-a800: #001a16;

    --green-text-dark-bg: var(--green-300);
    --green-text-dark-bg-muted: var(--green-500);
    --green-bg-dark: var(--green-a700);
    --green-border-dark-bg: var(--green-a400);
    --green-hover-dark-bg: var(--green-200);

    --green-text-light-bg: var(--green-a300);
    --green-text-light-bg-muted: var(--green-a100);
    --green-bg-light: var(--green-100);
    --green-bg-light-soft: var(--green-50);
    --green-border-light-bg: var(--green-300);
    --green-hover-light-bg: var(--green-a200);

    /* Others */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-drawer: cubic-bezier(.32, .72, 0, 1);
    --transition: color .2s ease, background-color .2s ease, border-color .2s ease, background-size .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out), opacity .3s var(--ease-out), visibility .3s;
    
    /* Fonts */
    --poppins: 'Poppins', Arial, sans-serif;
    --inter: 'Inter', Arial, sans-serif;

    /* Icons */
    --ti: "tabler-icons";
    --fa: "Font Awesome 6 Free";

}