@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    background: black;
}

@layer base {
    .animate-in {
        animation: animateIn 0.3s ease forwards;
    }

    @keyframes animateIn {
        from {
            opacity: 0;
            transform: var(--transform-from, translateX(100%));
        }
        to {
            opacity: 1;
            transform: var(--transform-to, translateX(0));
        }
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    :root {
        /* Magenta */
        --color-magenta-900: #50003f;
        --color-magenta-800: #891869;
        --color-magenta-700: #a91a90;
        --color-magenta-600: #ca26a5;
        --color-magenta-500: #e142bc;
        --color-magenta-400: #f877d2;
        --color-magenta-300: #fface5;
        --color-magenta-200: #ffcef2;
        --color-magenta-100: #fedff3;
        --color-magenta-50: #feeff9;

        /* Purple */
        --color-purple-900: #3a1659;
        --color-purple-800: #633495;
        --color-purple-700: #7c3ec3;
        --color-purple-600: #944de7;
        --color-purple-500: #a964f7;
        --color-purple-400: #c490f9;
        --color-purple-300: #ddb9ff;
        --color-purple-200: #ebd5ff;
        --color-purple-100: #f2e3ff;
        --color-purple-50: #f9f1ff;

        /* Blue */
        --color-blue-900: #002661;
        --color-blue-800: #1948a3;
        --color-blue-700: #175bcc;
        --color-blue-600: #266ef1;
        --color-blue-500: #068bee;
        --color-blue-400: #6daafb;
        --color-blue-300: #a9c9ff;
        --color-blue-200: #cddffe;
        --color-blue-100: #dee9fe;
        --color-blue-50: #eff4fe;

        /* Teal */
        --color-teal-900: #002d33;
        --color-teal-800: #1a535a;
        --color-teal-700: #016974;
        --color-teal-600: #007f8c;
        --color-teal-500: #0095a4;
        --color-teal-400: #01b8ca;
        --color-teal-300: #77d5e3;
        --color-teal-200: #b0e7ef;
        --color-teal-100: #cdeef3;
        --color-teal-50: #e2f8fb;

        /* Green */
        --color-green-900: #002f14;
        --color-green-800: #0d572d;
        --color-green-700: #166c3b;
        --color-green-600: #0e8345;
        --color-green-500: #009a51;
        --color-green-400: #06c167;
        --color-green-300: #7fd99a;
        --color-green-200: #b1eac2;
        --color-green-100: #d3efda;
        --color-green-50: #eaf6ed;

        /* Lime */
        --color-lime-900: #1b2d00;
        --color-lime-800: #365310;
        --color-lime-700: #3f6900;
        --color-lime-600: #4f7f06;
        --color-lime-500: #5b9500;
        --color-lime-400: #77b71c;
        --color-lime-300: #a6d467;
        --color-lime-200: #cae6a0;
        --color-lime-100: #deeec6;
        --color-lime-50: #eef6e3;

        /* Yellow */
        --color-yellow-900: #392300;
        --color-yellow-800: #6b4100;
        --color-yellow-700: #845201;
        --color-yellow-600: #9f6402;
        --color-yellow-500: #b97502;
        --color-yellow-400: #d79900;
        --color-yellow-300: #f6bc2f;
        --color-yellow-200: #ffd688;
        --color-yellow-100: #fbe5b6;
        --color-yellow-50: #fdf2dc;

        /* Amber */
        --color-amber-900: #3e2000;
        --color-amber-800: #6b4100;
        --color-amber-700: #904a07;
        --color-amber-600: #a95f03;
        --color-amber-500: #c46e00;
        --color-amber-400: #df9500;
        --color-amber-300: #ffb749;
        --color-amber-200: #ffc67c;
        --color-amber-100: #ffe4b7;
        --color-amber-50: #fff1e1;

        /* Orange */
        --color-orange-900: #461a00;
        --color-orange-800: #823006;
        --color-orange-700: #a33b04;
        --color-orange-600: #c54600;
        --color-orange-500: #e65300;
        --color-orange-400: #fc823a;
        --color-orange-300: #ffb48c;
        --color-orange-200: #ffd3bc;
        --color-orange-100: #fee2d4;
        --color-orange-50: #fff0e9;

        /* Red */
        --color-red-900: #520810;
        --color-red-800: #950f22;
        --color-red-700: #bb032a;
        --color-red-600: #de1135;
        --color-red-500: #f83446;
        --color-red-400: #fc7f79;
        --color-red-300: #ffb2ab;
        --color-red-200: #ffd2cd;
        --color-red-100: #ffe1de;
        --color-red-50: #fff0ee;

        /* White and Gray */
        --color-white: #ffffff;
        --color-gray-900: #282828;
        --color-gray-800: #4b4b4b;
        --color-gray-700: #5e5e5e;
        --color-gray-600: #727272;
        --color-gray-500: #868686;
        --color-gray-400: #a6a6a6;
        --color-gray-300: #bbbbbb;
        --color-gray-200: #dddddd;
        --color-gray-100: #e8e8e8;
        --color-gray-50: #f3f3f3;

        /* Buttons */
        --color-buttons-primary-default: #1f1f1f;
        --color-buttons-primary-pressed: #000000;
        --color-buttons-primary-disabled: #a6a6a6;
        --color-buttons-primary-hover: #4b4b4b;
        --color-buttons-secondary-default: #ffffff;
        --color-buttons-secondary-default-border: #1f1f1f;
        --color-buttons-secondary-pressed: #e8e8e8;
        --color-buttons-secondary-pressed-border: #000000;
        --color-buttons-secondary-hover: #ffffff;
        --color-buttons-secondary-hover-border: #4b4b4b;
        --color-buttons-secondary-disabled: #a6a6a6;

        /* Other Colors */
        --color-black: #000000;
        --color-primaryA: var(--color-black);
        --color-primaryB: #ffffff;
        --color-accent: #068bee;
        --color-negative: #d32f2f;
        --color-warning: #fbc02d;
        --color-positive: #388e3c;

        /* Backgrounds */
        --color-background-primary: #ffffff;
        --color-background-secondary: #e0e0e0;
        --color-background-tertiary: #bdbdbd;
        --color-background-inverse-primary: #000000;
        --color-background-inverse-secondary: #424242;

        /* Content */
        --color-content-primary: #000000;
        --color-content-secondary: #616161;
        --color-content-tertiary: #9e9e9e;
        --color-content-inverse-primary: #ffffff;
        --color-content-inverse-secondary: #bdbdbd;
        --color-content-inverse-tertiary: #757575;

        /* Borders */
        --color-border-opaque: #bdbdbd;
        --color-border-transparent: rgba(0, 0, 0, 0.1);
        --color-border-selected: #ffffff;
        --color-border-inverse-opaque: #424242;
        --color-border-inverse-transparent: rgba(255, 255, 255, 0.1);
        --color-border-inverse-selected: #ffffff;

        /* Status Backgrounds */
        --color-background-status-disabled: #e0e0e0;
        --color-background-overlay-art: #1a1a1a;
        --color-background-overlay-dark: #3d3d3d;
        --color-background-overlay-light: #f2f2f2;
        --color-background-overlay-elevation: #e5e5e5;
        --color-background-accent: #1e88e5;
        --color-background-negative: #d32f2f;
        --color-background-warning: #fbc02d;
        --color-background-positive: #388e3c;
        --color-background-light-accent: #e3f2fd;
        --color-background-light-negative: #ffebee;
        --color-background-light-warning: #fffde7;
        --color-background-light-positive: #e8f5e9;
        --color-background-always-dark: #000000;
        --color-background-always-light: #ffffff;

        /* Status Content */
        --color-content-status-disabled: #9e9e9e;
        --color-content-on-color: #ffffff;
        --color-content-on-color-inverse: #000000;
        --color-content-accent: #1e88e5;
        --color-content-negative: #d32f2f;
        --color-content-warning: #fbc02d;
        --color-content-positive: #388e3c;

        /* Status Borders */
        --color-border-status-disabled: #e0e0e0;
        --color-border-accent: #1e88e5;
        --color-border-negative: #d32f2f;
        --color-border-warning: #fbc02d;
        --color-border-positive: #388e3c;
        --color-border-accent-light: #90caf9;

        /* Other */
        --color-safety: #1e88e5;
        --color-oats: #388e3c;
        --color-freight: #1565c0;
        --color-rewards-tier1: #1e88e5;
        --color-rewards-tier2: #fdc045;
        --color-rewards-tier3: #b0b0b0;
        --color-rewards-tier4: #000000;
        --color-membership: #fbc02d;

        /* typography */
        --typography-1: "Ubuntu Sans" "sans-serif";
        --typography-2: "Uber Move" "sans-serif";

        /* Font Sizes */
        --fs-display-large: 96px;
        --fs-display-medium: 52px;
        --fs-display-small: 44px;
        --fs-display-xsmall: 36px;
        --fs-heading-xxlarge: 40px;
        --fs-heading-xlarge: 36px;
        --fs-heading-large: 32px;
        --fs-heading-medium: 28px;
        --fs-heading-small: 24px;
        --fs-heading-xsmall: 20px;
        --fs-label-large: 18px;
        --fs-label-medium: 16px;
        --fs-label-small: 14px;
        --fs-label-xsmall: 12px;
        --fs-paragraph-large: 18px;
        --fs-paragraph-medium: 16px;
        --fs-paragraph-small: 14px;
        --fs-paragraph-xsmall: 12px;

        /* Line Heights */
        --lh-display-large: 112px;
        --lh-display-medium: 64px;
        --lh-display-small: 52px;
        --lh-display-xsmall: 44px;
        --lh-heading-xxlarge: 52px;
        --lh-heading-xlarge: 44px;
        --lh-heading-large: 40px;
        --lh-heading-medium: 36px;
        --lh-heading-small: 32px;
        --lh-heading-xsmall: 28px;
        --lh-label-large: 24px;
        --lh-label-medium: 20px;
        --lh-label-small: 16px;
        --lh-label-xsmall: 16px;
        --lh-paragraph-large: 28px;
        --lh-paragraph-medium: 24px;
        --lh-paragraph-small: 20px;
        --lh-paragraph-xsmall: 20px;

        /* Font Weights */
        --fw-bold: 700;
        --fw-medium: 500;
        --fw-regular: 400;
    }
}