/* 
   Tabletop Designer Unified Stylesheet
   Design system tokens are managed via the Tailwind CDN configuration in head.ejs
*/

/* Custom Base Styles */
body { 
    background-color: var(--color-blueprint-bg); 
    color: var(--color-blueprint-text); 
    font-family: var(--font-serif);
    background-image: 
        linear-gradient(rgba(43, 89, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 89, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

.header-font { font-family: var(--font-sans); }

.fig-marker {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 10px;
    color: var(--color-blueprint-blue);
    border-left: 2px solid var(--color-blueprint-blue);
    padding-left: 8px;
    text-transform: uppercase;
}

.manual-image { 
    background-color: #fff; 
    border: 1px solid var(--color-blueprint-blue); 
    border-radius: 4px; 
    color: var(--color-blueprint-blue); 
    font-weight: 700;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
}

.manual-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(43, 89, 255, 0.03) 10px, rgba(43, 89, 255, 0.03) 11px);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

[x-cloak] { display: none !important; }