/* =========================================
   Typography & Fonts
   ========================================= */
@font-face {
    font-family: 'Lexend';
    src: url('https://seoniocdn.b-cdn.net/font/lexend-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Flex';
    src: url('https://seoniocdn.b-cdn.net/font/sansflex.woff2') format('woff2');
    font-weight: 100 1000; 
    font-display: swap; 
}

/* =========================================
   Base Styles
   ========================================= */
body {
    background-color: #080809;
    font-family: 'Google Sans Flex', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: #f4f5f6;
    font-family: 'Lexend', system-ui, -apple-system, sans-serif;
    font-weight: 500;
}

.lexend { 
    font-family: 'Lexend', system-ui, -apple-system, sans-serif; 
}

/* =========================================
   Components & Utilities
   ========================================= */
.mytab { color: gray; border-bottom: 2px solid transparent; }
.mytab.active { color: #689BEE; border-bottom-color: #689BEE; }

.mypattern {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="%232e2e2e" stroke-opacity="0.5" stroke-width="1"/></svg>');
  background-size: 60px 60px;
  background-repeat: repeat;
}

.mycard { background-color: #0F1011; border: solid #1B1C1D; border-radius: 25px; }
.mycard:hover { background-color: #161718; }
.mycardelement { background-color: #141818; border-radius: 12px; }
.mydivider { border-color: #23252A; }

/* Buttons */
.mybuttonlight { background-color: #e6e6e6; color: #080809; border-radius: 20px; font-weight: 500; }
.mybuttonlight:hover { background-color: #ffffff; }

.mybuttongray { background-color: #28282c; color: #f4f5f6; border: solid #3e3e45; border-radius: 20px; font-weight: 500; }
.mybuttongray:hover { background-color: #323237; }

.mybuttontrans { background-color: #080809; color: #f4f5f6; font-weight: 500; border: solid #3e3e45; border-radius: 20px; }
.mybuttontrans:hover { background-color: #323237; }

/* Text Colors */
.mytexthead { color: #f4f5f6; }
.mytexprimary { color: #c2c2c2; }
.mytextsecondary { color: #9fa0a3; }
.myaccent { color: #689BEE; }
.myaccent:hover { color: #1FA5FF; }
.mylink { color: #849BC5; }
.mylink:hover { color: #4474D0; }

/* =========================================
   View Transitions API
   ========================================= */
@view-transition { navigation: auto; }

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.25s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}  

/* =========================================
   Custom Scrollbar
   ========================================= */
:root {
    --scrollbar-size: 6px;
    --thumb-idle:   rgba(255, 255, 255, 0.12);
    --thumb-hover:  rgba(255, 255, 255, 0.25);
    --thumb-active: rgba(255, 255, 255, 0.40);
    --track-idle:   transparent;
    --track-hover:  rgba(255, 255, 255, 0.04);
}
        
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--thumb-idle) var(--track-idle);
}
*:hover { scrollbar-color: var(--thumb-hover) var(--track-hover); }

/* WebKit */
::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
::-webkit-scrollbar-track { background: var(--track-idle); }
::-webkit-scrollbar-thumb { background: var(--thumb-idle); border-radius: 999px; }
::-webkit-scrollbar-corner { background: transparent; }

*:hover::-webkit-scrollbar-track { background: var(--track-hover); }
*:hover::-webkit-scrollbar-thumb { background: var(--thumb-hover); }
*:hover::-webkit-scrollbar-thumb:hover { background: var(--thumb-active); }
::-webkit-scrollbar-thumb:active { background: var(--thumb-active); }