@import url('https://fonts.googleapis.com/css2?family=Combo&display=swap');

/* Light/Dark themes */
.age-container{
    --age-text: #0056b3;
    --age-border: color-mix(in oklab, currentColor 28%, transparent);
    --age-shadow: transparent;

/* Respect user theme */
@media (prefers-color-scheme: dark){
    .age-container{
        --age-text: #e7e7e7;
        --age-border: color-mix(in oklab, #e7e7e7 22%, transparent);
        --age-shadow: rgba(0,0,0,0.25);
    }
}
@media (prefers-color-scheme: light){
    .age-container{
        --age-text: #1f2937; /* slate-800 */
        --age-border: color-mix(in oklab, #1f2937 22%, transparent);
        --age-shadow: rgba(0,0,0,0.06);
    }
}

/* Layout: no card background */
.age-container{
    background: none;
    border: 0;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.75rem 0;
}

.age-display{
    display: flex;
    align-items: center;
    justify-content: center;
}

#age-counter{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: Combo, sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.4vw + 0.6rem, 1.25rem);
    line-height: 1;

    color: var(--age-text);
    background: transparent;
    padding: 0.25rem 0.5rem;

    border-radius: 8px;
    border: 1px solid var(--age-border);
    box-shadow: 0 1px 0 var(--age-shadow);
}


#age-counter:focus-visible{
    outline: 2px solid color-mix(in oklab, currentColor 45%, transparent);
    outline-offset: 2px;
    border-color: color-mix(in oklab, currentColor 45%, transparent);
}
#age-counter:hover{
    border-color: color-mix(in oklab, currentColor 40%, transparent);
}

/* Mobile tweak */
@media (max-width: 768px){
    #age-counter{ font-size: 1.05rem; }
}
}