/* ==========================================================================
   Nomos - Base Styles
   Shared across all templates. Loaded via <link> in the Thymeleaf head fragment.
   ========================================================================== */

/* Typography */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}

/* No-scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Login hero pattern */
.hero-pattern {
    background-image: radial-gradient(#1978e5 0.5px, transparent 0.5px), radial-gradient(#1978e5 0.5px, #f6f7f8 0.5px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    opacity: 0.08;
}

/* Index page specifics */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(135deg, #0e141b 0%, #1978e5 100%);
}

.data-flow-line {
    stroke-dasharray: 8;
    stroke-dashoffset: 100;
    animation: dash 10s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}