*, *::before, *::after {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Supply';
    src: url('../assets/fonts/PPSupplyMono-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Univers Next Pro';
    src: url('../assets/fonts/Univers\ Next\ Pro\ Light.woff2')
}

:root {

    /*paleta*/
    --negro: #000;
    --negro-principal: #1A1A1A;
    --gris-oscuro: #333;
    --gris-medio: #666;
    --gris: #888;
    --gris-claro: #ccc;
    --blanco-roto: #efefef;
    --blanco-fondo: #fafaf8;
    --blanco: #fff;
    --acento-principal: #FF4E2A;
    --acento-secundario: #FF8469;
    --sombra-acento: #C23A18;
    --luz-acento: #FF947D;
    --verde-led: #00FF00;

    /*fuentes*/
    --font-display: 'Univers Next Pro', 'Univers Next', 'Helvetica Neue', 'Arial', sans-serif;
    --font-mono: 'PP Supply Mono', 'JetBrains Mono', 'IBM Plex Mono', monospace;

    /*escala tipográfica*/
    --font-size-sm: 16px;
    --font-size-md: 20px;
    --font-size-lg: 28px;
    --font-size-xl: 36px;
    --font-size-xxl: 48px;

    /*tracking letras*/
    --tracking-extra-tight: -0.03em;
    --tracking-tight: -0.02em;
    --tracking-normal: -0.01em;
    --tracking-default: 0;

    /*espaciado*/
    --space-0: 1px;
    --space-100: 2px;
    --space-200: 4px;
    --space-300: 8px;
    --space-400: 12px;
    --space-500: 16px;
    --space-600: 20px;
    --space-700: 28px;
    --space-800: 36px;
    --space-900: 48px;

    /*radios*/
    --radius-100: 4px;
    --radius-200: 8px;
    --radius-300: 12px;
    --radius-400: 16px;
    --radius-500: 20px;
    --radius-600: 28px;
    --radius-700: 36px;
    --radius-800: 48px;
    --radius-key-small: 6px;
    --radius-key-big: 16px;

    /*sombras*/
    --shadow-base-white-key-dark: inset 0 -1.5px 0.5px rgba(0, 0, 0, 0.25);
    --shadow-base-white-key-light: inset 0 1.5px 1px rgba(255, 255, 255, 1);
    --shadow-base-accent-key-dark: inset 0 -1.5px 0.5px rgba(194, 58, 24, 0.60);
    --shadow-base-accent-key-light: inset 0 1.5px 1px rgba(255, 148, 125, 1);
    --shadow-relief-white-key-dark: 4px 4px 4px rgba(0, 0, 0, 0.25);
    --shadow-relief-white-key-dark-pressed: 2px 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-relief-white-key-light: -4px -4px 4px rgba(255, 255, 255, 1);
    --shadow-relief-accent-key-light-pressed: -2px -2px 4px rgba(255, 255, 255, 1);
    --shadow-relief-accent-key-dark: 4px 4px 4px rgba(194, 58, 24, 0.60);
    --shadow-relief-accent-key-dark-pressed: 2px 2px 4px rgba(194, 58, 24, 0.60);
    --shadow-relief-accent-key-light: -4px -4px 4px rgba(255, 163, 142, 0.9);
    --shadow-relief-accent-key-light-pressed: -2px -2px 4px rgba(255, 163, 142, 0.9);
    --shadow-pressed: inset 3px 3px 3px rgba(0, 0, 0, 0.25);

    /*transiciones*/
    --transition-duration: 0.125s;
    --transition-easing: ease-in-out;
    --transition: var(--transition-duration) var(--transition-easing);

    /*medidas instrimento*/
    --instrument-width: 1180px;
    --instrument-height: 560px;
    --small-key-length: 68px;
    --big-key-length: 140px;
    --zone-a-height: 140px;
    --zone-b-height: 140px;
    --zone-c-height: 212px;

    /*z-index*/
    --z-index-base: 1;
    --z-index-icons: 10;
    --z-index-modal: 100;
    --z-index-tooltip: 1000;
}

body {
    background: var(--blanco-roto);
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: var(--space-700);
    margin: 0;
    overflow: hidden;

}

::selection {
    background: var(--acento-secundario);
    color: var(--blanco);
}