/**
 * Tetra Main Stylesheet
 * Imports all component stylesheets
 */

/* Color theme variables */
@import url('./colors.css');

/* Layout and structure */
@import url('./layout.css');

/* UI components */
@import url('./components.css');

/* Dialogs and toasts */
@import url('./dialogs.css');

/* ============================================================================
   Font Faces
   ============================================================================ */

@font-face {
    font-family: Nunito;
    src: url('../font/Nunito-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans Mono';
    src: url('../font/NotoSansMono-Regular.ttf') format('truetype');
    font-weight: 200 700;
    font-style: normal;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url('../font/material-symbols-outlined.woff2') format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    src: url('../font/Rubik[wght].woff2') format('woff2');
}

/* ============================================================================
   Tetra Branding
   ============================================================================ */
.tetra-red {
    color: var(--tetra-red);
}

.tetra-yellow {
    color: var(--tetra-yellow);
}

.tetra-green {
    color: var(--tetra-green);
}

.tetra-blue {
    color: var(--tetra-blue);
}

.tetra-indigo {
    color: var(--tetra-indigo);
}

.tetra-purple {
    color: var(--tetra-purple);
}


/* ============================================================================
   Global Utilities
   ============================================================================ */

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--accent3);
    outline-offset: 2px;
}

/* Scrollbar styling */
/* Standard properties (Firefox, Safari 16+) */
* {
    scrollbar-color: var(--color4) var(--color2);
    scrollbar-width: thin;
}

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color2);
}

::-webkit-scrollbar-thumb {
    background: var(--color4);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color5);
}

/* Selection styling */
::selection {
    background: var(--accent3);
    color: var(--color1);
}