/* tokens.css */

:root {
    /* polymer colors tokens */
    --app-primary-color: #202020;
    --app-secondary-color: #757575;
    --app-accent-color: #172C50;

    --color-white: #fff;
    --btn-text: #202020;
    --btn-bg: #f9f9f9;

    --gray-50: #fafafa;
    --gray-100: #f5f5f5; /* rgba(0, 0, 0, 0.08); #2979ff; */
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-600: #757575;
    --gray-900: #202020;

    --focus-blue: #2979ff;

    --secondary-btn-bg: #ececec;
    --secondary-btn-txt: #0d0d0d; /* opacity: 0.8; */

    --btn-bg-base: var(--gray-900);
    --btn-bg-hover: var(--gray-100);
    --btn-bg-active: var(--gray-200);

    --z-max: 10000;
    --z-top: 1000;
    --z-mid: 900;
    --z-low: 100;

    /* Spacing */
    --spacing: .25rem;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* UI */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}