@import "tailwindcss";

@source "../../resources/views/**/*.blade.php";
@source "../../app/**/*.php";

@theme {
    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
    --color-asphalt: #202a33;
    --color-lake: #256f83;
    --color-moss: #4f7d58;
    --color-clay: #b85f3d;
    --color-paper: #f7f5f0;
}

body {
    background: #f7f5f0;
    color: #202a33;
}

.activity-tooltip {
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.activity-dot:hover .activity-tooltip,
.activity-dot:focus .activity-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.energy-block-badge {
    bottom: 0.5rem;
    background: #fbbf24;
    padding: 0.25rem 0.375rem;
    right: 0.5rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.energy-block-icon {
    height: 0.875rem;
    width: 0.875rem;
}

.energy-block-tooltip {
    bottom: 100%;
    left: 50%;
    margin-bottom: 0.375rem;
    min-width: max-content;
    padding: 0.5rem 0.75rem;
    background: #202a33;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 120ms ease, transform 120ms ease;
    visibility: hidden;
    z-index: 10;
}

.energy-block-badge:hover .energy-block-tooltip,
.energy-block-badge:focus .energy-block-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
}

.auth-login-panel {
    max-width: 36rem;
}

.auth-login-button {
    display: inline-flex;
    padding: 0.75rem 1.25rem;
}