/* Contém: Reset, Variáveis (:root) e Estilos Globais.* */

:root {
    --bg-main: #050505;
    --bg-panel: #121212;
    --text-color: #eee;
    --accent-color: #ff9f43;

    --color-root-fill: #ff3838;
    --color-third-fill: #ff9f43; /* Laranja Intermediário */
    --color-fifth-fill: #54a0ff; /* Azul Intermediário */
    --color-chord-fill: #ffd700; /* Fallback (Amarelo) */
    --color-ext-fill: #00e5ff; /* Cyan (7ª) */

    --color-scale-border: #0099ff; /* Azul mais vibrante */
    --color-scale-text: #0099ff;
    --color-next-fill: #ffffff; /* Roxo para próxima nota */

    /* Variáveis Dinâmicas */
    --fret-width: 60px;
    --fret-height: 42px;
    --note-size: 28px;
    --note-font: 0.8rem;
    --scale-opacity: 0.8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: var(--bg-main);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}